openGitHubFilesInVSCode.user.js

// ==UserScript==
// @name           Open GitHub files in VS Code
// @version        1.0.4
// @author         aminomancer
// @homepageURL    https://github.com/aminomancer/userscripts
// @supportURL     https://github.com/aminomancer/userscripts
// @downloadURL    https://cdn.jsdelivr.net/gh/aminomancer/userscripts@latest/openGitHubFilesInVSCode.user.js
// @updateURL      https://cdn.jsdelivr.net/gh/aminomancer/userscripts@latest/openGitHubFilesInVSCode.user.js
// @namespace      https://github.com/aminomancer
// @match          https://github.com/*/*
// @grant          GM_listValues
// @grant          GM_getValue
// @grant          GM_setValue
// @description    When viewing a file on a known GitHub repo with a local clone, pressing the `\` key will open the file in VS Code. If a line is highlighted, the file will be opened to that line in VS Code.
// @license        CC-BY-NC-SA-4.0
// @icon           https://cdn.jsdelivr.net/gh/aminomancer/userscripts@latest/icons/vscode.svg
// ==/UserScript==

/* global GM_listValues, GM_getValue, GM_setValue */

// These are the default preference values. When the script is first installed,
// these values will be used to populate the preferences, which are stored by
// the userscript manager. To modify the preferences, don't edit the file here.
// Go to the Values tab in the userscript manager and edit them there.
const defaultPrefs = {
  // This script works by opening a URL with vscode's custom URL protocol. The
  // protocol name can be changed here. The default is "vscode", but if you use
  // VS Code Insiders, you should change it to "vscode-insiders".
  protocol_name: "vscode",
  // This is how the script knows what local file to open. This pref maps each
  // GitHub repo to the path of the local clone. If the repo name is "foo/bar",
  // then the path should be "/path/to/foo/bar". If a repo is not listed here,
  // it will not be opened in VS Code. Only use forward slashes, even on
  // Windows, since the path becomes part of a URL. You can also set a default
  // directory which will be used as a fallback if a repo is not specifically
  // listed here. If default_dir is set to "C:/Repos" then a repo called
  // "user123/example456" will be opened from "C:/Repos/example456".
  repos: {
    // default_dir: "/path/to/default_dir",
    // "user123/example456": "/path/to/user123/example456",
  },
};

for (const [key, value] of Object.entries(defaultPrefs)) {
  if (GM_getValue(key) === undefined) {
    GM_setValue(key, value);
  }
}

const prefs = {};
for (const key of GM_listValues()) {
  prefs[key] = GM_getValue(key);
}

function openInVSCode({ user, repo, filePath, lineNum }) {
  let repoPath = prefs.repos[`${user}/${repo}`];
  if (!repoPath) {
    if (prefs.repos.default_dir) {
      repoPath = `${prefs.repos.default_dir}/${repo}`;
    } else {
      return;
    }
  }
  let protocolURL = `${prefs.protocol_name}://file/${repoPath}/${filePath}`;
  if (lineNum) {
    protocolURL += `:${lineNum}`;
  }
  if (!protocolURL) {
    return;
  }
  let link = document.createElement("a");
  link.setAttribute("href", protocolURL);
  link.click();
}

function getForFilesView() {
  let fileView;
  let fileHeader;
  const hash = location.hash?.match(/#diff-(.*)/)?.[1]?.split("-")[0];
  let targetDiff = hash && `diff-${hash}`;
  let targetFile = targetDiff && document.getElementById(targetDiff);
  while (targetFile) {
    if (!targetFile.classList.contains("file")) {
      if (targetFile.classList.contains("selected-line")) {
        targetFile = targetFile.closest(".file");
        continue;
      }
      break;
    }
    const header = targetFile.querySelector(".file-header");
    const rect = header.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      fileView = targetFile;
      fileHeader = header;
    }
    break;
  }

  if (!fileView) {
    const fileHeaders = document.querySelectorAll(".file-header");
    for (const header of fileHeaders) {
      const rect = header.getBoundingClientRect();
      if (
        Math.floor(
          Math.abs(rect.top - parseInt(getComputedStyle(header).top))
        ) === 0
      ) {
        fileHeader = header;
        fileView = fileHeader.closest(".file");
        break;
      }
    }
  }

  if (!fileView) {
    return null;
  }

  const selectedLine = fileView.querySelector(".selected-line");
  const lineNum = selectedLine?.dataset?.lineNumber;

  const fileMenu = fileHeader.querySelector(".dropdown details-menu");
  let fileDetails;
  for (const item of fileMenu.children) {
    let path = item.pathname;
    if (!path) continue;
    const match = path.match(/\/([^/]+)\/([^/]+)\/blob\/([^/]+)\/(.*)/);
    if (!match) continue;
    const [, user, repo, , filePath] = match;
    fileDetails = { user, repo, filePath, lineNum };
    break;
  }

  return fileDetails;
}

function getForURL(url) {
  switch (typeof url) {
    case "string":
      url = new URL(url);
      break;
    case "object":
      if (url instanceof URL) break;
      if (url instanceof Location) break;
      if (url instanceof HTMLAnchorElement) {
        url = new URL(url.href);
        break;
      }
    // fall through
    default:
      return null;
  }
  const [, user, repo, , , ...pathParts] = url.pathname.split("/");
  if (!pathParts.length) return null;
  const lineNum = url.hash?.match(/^#L(\d+)/)?.[1];
  return { user, repo, filePath: pathParts.join("/"), lineNum };
}

function handleKeydown(event) {
  if (event.key === "\\") {
    if (document.querySelector("#files.diff-view")) {
      const fileDetails = getForFilesView();
      if (!fileDetails) return;
      event.preventDefault();
      openInVSCode(fileDetails);
    } else if (location.pathname.match(/^\/[^/]+\/[^/]+\/blob\//)) {
      const fileDetails = getForURL(location);
      if (!fileDetails) return;
      event.preventDefault();
      openInVSCode(fileDetails);
    } else if (document.querySelector(".js-navigation-container")) {
      const focusedItem = document.querySelector(
        ".js-navigation-item.navigation-focus"
      );
      if (!focusedItem) return;
      const rect = focusedItem.getBoundingClientRect();
      if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
        const link = focusedItem.querySelector("a.rgh-quick-file-edit");
        if (!link) return;
        const fileDetails = getForURL(link);
        if (!fileDetails) return;
        event.preventDefault();
        openInVSCode(fileDetails);
      }
    }
  }
}

document.addEventListener("keydown", handleKeydown);