Create Custom Keyboard Shortcuts for VSCode Extensions

Visual Studio Code (VSCode) is a powerful and highly customizable code editor, with a rich library of extensions that can significantly enhance your coding experience. In this post, I’ll guide you through the steps to create custom keyboard shortcuts specifically for extension commands in VSCode, allowing you to access your favorite extension features with just a few keystrokes. 

Whether you’re frequently using GitLens to manage your repository, Docker to control your containers, or GitHub Copilot to assist with code suggestions, using custom key bindings grants access to these features without needing to navigate through menus or remember long command names. Let’s first look at setting up a shortcut to open an extension’s “View” (i.e. the sidebar tab for a given extension). 

Add keyboard shortcuts to an extension’s View command.

The first step is to identify the specific view command from the extension you want to bind to a keyboard shortcut. Here’s how:

1. Within VSCode, press Cmd+K Cmd+S (or Ctrl+K Ctrl+S on Windows) to access the Keyboard Shortcuts menu
2. Within the search bar, type View: Show. Commands that begin with this prefix are used to switch focus to the sidebar views.  
3. After determining which View you would like to add a new key binding to, click on the pencil icon next to the command to edit the key binding.
4. Press the desired key combination (Note: Make sure the key binding you choose isn’t already in use, or adjust it if needed to avoid conflicts. VSCode will provide a warning if the key binding is already in use within the application, but if you have any system-wide shortcuts that conflict, it won’t provide any insight).

For example, setting Ctrl+Shift+D to open the Docker Explorer gives you quick access to your containers with just one keystroke. Adding keyboard shortcuts to commands that begin with View: Show should also update the tooltip for an extension’s sidebar tab to include the key binding to interact with it, providing an easy way to recall custom key bindings without going back into the Keyboard Shortcuts menu.

Create custom multi-command keyboard shortcuts.

Sometimes, you may want a single keyboard shortcut to perform multiple actions in sequence. For example, you might want to get Copilot’s opinion on a code section quickly. To create a custom keyboard shortcut for a multi-command, follow these steps:

1. Within the Keyboard Shortcuts menu, select the Open Keyboard Shortcuts (JSON)” icon in the upper right corner.
2. Within the key bindings.json file, define a new key binding that executes the runCommands command; runCommands allows for a single command to run multiple VSCode commands in sequence. Below is an example of how this could look to create a keyboard shortcut that attaches a selected code snippet to Copilot Chat and asks the question “how would you improve this code?” with the key binding shift+cmd+/ (I remember it as cmd+?):

   {
     "key": "shift+cmd+/",
     "command": "runCommands",
     "args": {
       "commands": [
         "github.copilot.chat.attachSelection",
         "workbench.panel.chat.view.copilot.focus",
         {
           "command": "editor.action.insertSnippet",
             "args": {
               "snippet": "how would you improve this code?"
             }
         },
       ]
     }
   },
   

Creating custom keyboard shortcuts for your favorite VSCode extensions is a simple yet powerful way to enhance your productivity. With just a few steps, you can tailor your editor to work exactly how you want it, making your most-used extension features just a keystroke away.