How to Customize Keyboard Shortcuts in Visual Studio Code

Edited 2 weeks ago by ExtremeHow Editorial Team

Visual Studio CodeKeyboard ShortcutsCustomizationProductivitySettingsUser PreferencesKeybindingsCommandsWorkflowShortcutsOptimizationTipsToolsInterfacePerformanceProgrammingDevelopmentExtensionsEditorEfficiency

Visual Studio Code, often referred to as VS Code, is a popular code editor developed by Microsoft. It supports various programming languages and comes with a large set of features. One of its powerful features is the ability to customize keyboard shortcuts. This allows you to tailor your development environment to better match your workflow and increase your productivity.

Keyboard shortcuts are key combinations that allow you to perform tasks quickly without using the mouse. This can speed up your coding process significantly. Fortunately, VS Code provides a very flexible way to customize these shortcuts according to your personal preferences. Let's learn how you can customize keyboard shortcuts in Visual Studio Code.

Accessing the keyboard shortcuts settings

To start customizing your keyboard shortcuts in VS Code, you first need to access the keyboard shortcut settings. You can do it like this:

1. Open Visual Studio Code.
2. Go to the menu bar and click File (Windows/Linux) or Code (macOS).
3. Select Preferences.
4. Click Keyboard shortcuts. Alternatively, you can use the default keyboard shortcut Ctrl + K Ctrl + S (Windows/Linux) or Cmd + K Cmd + S (macOS) to open the keyboard shortcut settings directly.

Understanding the keyboard shortcuts UI

When you open the Keyboard Shortcuts setting, you see a user-friendly interface that displays a list of all existing keyboard shortcuts. This interface is divided into several sections:

• Command List: This is a comprehensive list of all the available commands that you can assign keyboard shortcuts to. Each command corresponds to a specific action in VS Code.
• Keybindings: Each command is followed by its currently assigned keyboard shortcut, also called a keybinding.
• Source: The source indicates whether the shortcut is the default setting or modified by the user.

Customizing keyboard shortcuts

Customizing keyboard shortcuts is very easy. Here is a step-by-step guide:

1. Search for the command you want to customize. You can use the search bar at the top of the keyboard shortcuts interface to quickly find a specific command.
2. Once you find the command, move your cursor to the keybinding column in front of the command.
3. Click on the keybinding to edit it. This will allow you to type the keyboard shortcut of your choice.
4. After typing your new key combination, press Enter key to save.

An example of customizing a shortcut would be to set Ctrl + B to toggle the sidebar. To do this, search for "View: Toggle Sidebar Visibility" in the command list. Next to the command, add or change the keybinding to Ctrl + B.

Deleting and resetting shortcuts

Sometimes, you may want to remove a keyboard shortcut or reset it to its default setting. Follow these steps:

1. Find the command whose shortcut you want to remove or reset.
2. Click the keybinding next to the command. A menu will appear.
3. Click the trash can icon to delete the shortcut.
4. To reset to the default shortcut, click the circular arrow icon.

Note that whenever you change, delete, or restore shortcuts, they take effect immediately. However, you can always return to this interface for further adjustments.

Conflicts with keyboard shortcuts

Sometimes, two or more commands may try to use the same keyboard shortcut. This creates conflicts, because the same keybinding cannot perform multiple actions at once. If a conflict arises, VS Code will prioritize the command that it thinks is most relevant based on the current context (e.g., language or application focus).

To resolve disputes:

1. Open the keyboard shortcut editor.
2. Find the conflicting shortcut by typing the key combination in the search bar.
3. Identify commands that use the same keybinding and decide which command's shortcut you prefer.
4. Change the keybinding of a command that you use less often or that is less important to your workflow.

Exporting and importing keybindings

If you use VS Code on multiple machines, you might want to keep your custom keybindings consistent across all devices. You can easily export and import your keybindings.

Exporting keybindings

1. Open the Command Palette by pressing Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS).
2. Type 'Preferences: Open Keyboard Shortcuts (JSON)' to open keybindings.json file.
3. Copy the contents of this file. This file contains all your customized keybindings in JSON format.

Importing keybindings

1. On the new machine, open VS Code and go to the command palette.
2. Type 'Preferences: Open Keyboard Shortcuts (JSON)' to open keybindings.json file.
3. Paste the copied JSON data into this file and save. Your custom keybindings will be applied immediately.

Disabling keybindings

If you find that you don't want a particular keybinding, and don't want to remove or reassign it, you can temporarily disable it:

1. Search for the command you want to disable.
2. Open the Keybindings menu by clicking on it.
3. Select 'Remove keybinding', which will effectively disable it.

To re-enable the keybinding, follow the same steps and assign a keyboard shortcut to the command.

Advanced customization with keybinding patterns

For users who want even more control, VS Code allows the use of keybinding patterns in the keybindings.json file. This is especially useful for creating keybindings that only apply under certain conditions, or for complex key combinations that the GUI doesn't support.

keybindings.json file can be accessed via the command palette with 'Preferences: Open Keyboard Shortcuts (JSON)'. Keybinding patterns are written in JSON object format, where you can specify:

• Key: The key combination you want to specify.
• command: The action triggered by the keybinding.
• when: An optional field that uses contextual key expressions to specify when the keybinding should be active. This is particularly useful for commands that are relevant only under specific circumstances.
• Mac, Linux, Windows: If necessary, you can specify platform-specific keybindings.

Example of keybinding pattern

{ "key": "ctrl+k ctrl+c", "command": "editor.action.commentLine", "when": "editorTextFocus && !editorReadonly" }

In this example, the key combination Ctrl + K Ctrl + C will comment out a line in the code editor if the editor has focus and is not read-only.

Conclusion

Customizing keyboard shortcuts in Visual Studio Code can greatly improve your development workflow. With the ability to reconfigure keybindings, remove unnecessary keybindings, and resolve conflicts, you have full control over how you interact with the editor. Additionally, advanced users can tap into keybindings.json file to create highly specific and conditional keybinding configurations. All these features make VS Code a highly customizable and user-friendly code editor for developers around the world.

Remember, it may take some time to practice with keyboard shortcuts, but once you get comfortable, coding will feel more intuitive and efficient.

  Share This Article

If you find anything wrong with the article content, you can request an update