Boost your Code Review game with custom VSCode shortcuts ⌨️

If you're a tech lead who spends a lot of time reviewing code and helping others, you know how crucial it is to be efficient. Over time, I've set up some handy keyboard shortcuts in Visual Studio Code (VSCode) that make my life a whole lot easier. Let me show you my keybindings.json and how these shortcuts can help you too.

Switch between Diff and Source

Switching between the diff view and the source view can be such a hassle, especially during code reviews.

These shortcuts make it super easy:

// Toggle between file diff and file source when in a diff editor
{
  "key": "cmd+ctrl+d",
  "command": "gitlens.openWorkingFile",
  "when": "editorFocus && (isInDiffEditor || editorReadonly)"
},
// Toggle between file source and file diff when not in a diff editor
{
  "key": "cmd+ctrl+d",
  "command": "git.openChange",
  "when": "editorFocus && !(isInDiffEditor || editorReadonly)"
},

How to Use: Just hit cmd+ctrl+d to switch between the diff and source views, no matter where you are. It feels like magic!

Note: Please make sure to install the GitLens VSCode extension for the shortcut to work. Otherwise, you'd need to replace the command "gitlens.openWorkingFile" with "git.openFile" in the JSON above.

Note 2: Of course, you might want to use any different shortcut, if you like! I gave cmd+ctrl+d only as an example that works for me.

Note 3: cmd+ctrl+d is already a global default shortcut for the Mac's native action "Lookup Dictionary". To disable it, see instructions in https://apple.stackexchange.com/a/29398.

Navigate Changes in File

When you're deep into a code review, navigating through changes efficiently is key. These shortcuts help you jump between changes within a single file effortlessly, without needing to manually scroll to the next change:

// Go to the next change in the compare editor
{
  "key": "ctrl+cmd+down",
  "command": "workbench.action.compareEditor.nextChange",
  "when": "textCompareEditorVisible"
},
// Go to the previous change in the compare editor
{
  "key": "ctrl+cmd+up",
  "command": "workbench.action.compareEditor.previousChange",
  "when": "textCompareEditorVisible"
},

How to Use: Use ctrl+cmd+down to jump to the next change and ctrl+cmd+up to go back to the previous change in the compare editor. This makes navigating through changes in your code reviews quick and efficient.

See Tree of all Changed Files

During code reviews, I often need to switch between the tree of changed files and the tree of all files in the repo. This shortcut makes that transition seamless:

// Focus on the active pull request
{
  "key": "shift+cmd+l",
  "command": "prStatus:github.focus"
}

How to Use: With the official GitHub Pull Request extension installed, press shift+cmd+l to quickly focus on the active pull request. This keeps your workflow smooth and uninterrupted. When you need to switch to a tree of all files in the project, you can use the default shortcut shift+cmd+e.

Mark File as Viewed

Once you've finished reviewing a file, you want to mark it as viewed. Normally it requires clicking a tiny checkbox in VSCODE with a mouse, but it's much faster to do it with a smart keyboard shortcut. Here's how to setup it:

{
  "key": "cmd+ctrl+c",
  "command": "runCommands",
  "args": {
    "commands": ["pr.markFileAsViewed", "prStatus:github.focus"]
  }
}

How to Use: Press cmd+ctrl+c to mark the current file as viewed. Moreover, your focus will now move to the pane of all changed files, allowing you to quickly navigate to the next file by pressing the Arrow Down and Enter. This small tweak can significantly streamline your review process.

Quick GitHub Link for Current Line

I share specific lines of our codebase from GitHub all the time. These shortcuts make copying and opening GitHub permalinks a no-brainer:

// Copy GitHub permalink
{
  "key": "shift+cmd+c",
  "command": "issue.copyGithubPermalink"
},
// Open GitHub permalink
{
  "key": "shift+cmd+x",
  "command": "issue.openGithubPermalink"
}

How to Use: Press shift+cmd+c to copy a permalink to your clipboard and shift+cmd+x to open a permalink right in your browser. So simple and fast!

Wrapping Up

These custom VSCode shortcuts have saved me tons of time and made my work a lot smoother. Whether you’re reviewing code, sharing GitHub links or switching between diff and source file of your own changes, these shortcuts can seriously up your game. Give them a try and see how much easier your workflow can get!

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌