Issue #18  (Editing Keyboard Shortcuts)08/24/22

Advertisement
Get a weekly dose of tools, articles, and other resources covering remote work, productivity, career well-being, and lots more.

Many developers prefer working only with the keyboard when inside their IDE. I personally don't mind switching from mouse to keyboard and back again multiple times during coding sessions. But if you prefer to use the keyboard as much as possible, you'll want to be familiar with the options available for learning and customizing the shortcuts, also called keybindings, in VS Code.

To view all the current keyboard shortcuts, you can do one of the following:

  • From the main menu, choose File (or Code on Mac) > Preferences > Keyboard Shortcuts
  • Use the combination keyboard shortcut CTRL/CMD-K + CTRL/CMD-S
  • In the command palette search for "keyboard shortcuts" and choose the option "Open Keyboard Shortcuts".
You'll see the something like the following:
Keyboard Shortcuts in VS Code

You can hit Enter, double-click, or right-click and choose "Change Keybinding" to edit any of the existing shortcuts. Inside the little edit window that appears, you can simply mimic your new keybinding and the appropriate change will appear in the window before you save it. Usefully, VS Code will tell you if the keybinding already exists, so you can determine whether or not to replace the existing one.
 
Editing a Keyboard Shortcut in VS Code

Microsoft has set up some online links that point to PDF versions of the keybindings, so you can print those out or have them open in a separate window if you wish: When searching for "keyboard shortcuts" in the command palette, you'll notice there's also two options to open shortcuts as JSON files. One is the default shortcuts, the same as what appears in the visual view of the shortcuts. The other file is where you hold your own keybindings — whether they're new ones you've added or bindings you've changed from the defaults.
 
Your Custom Keybindings in VS Code diffs

This is useful to have your own keybindings separated like this because it allows you to share your keybindings with others, port them to another editor, or just keep them as a backup (e.g. by saving them to GitHub or elsewhere). It's also useful should you want to delete a keybinding, which you can do either directly in the JSON file or by searching for that keybinding in the UI view of the keybindings.

And one last thing I'll mention about keybindings is that often certain keyboard shortcuts will do different things depending on the context. Usually that's fine, but in some cases, there could be a conflict that causes problems for you. If you right-click any of the keyboard bindings in the UI view list, you can choose "Show Same Keybindings" to see any potential conflicts related to that keyboard shortcut. An easy example is the use of the ESC key, which does different things depending on the context.

Finding Conflicts in Keybindings in VS Code

From there, you can determine if you need to make any changes. In the case of ESC, it's unlikely you'll need to make an adjustment. Mostly you'll want to check this sort of thing after you've made many of your own custom bindings, or possibly you're using numerous extensions that have caused a conflict.

Now on to this week's hand-picked links!
 

VS Code Tools

Node Dependencies — Code extension that lets you manage npm dependencies from a sidebar. Supports npm, Yarn, and pnpm.

StackFlex — Tools to save code snippets in the browser then access the same synced snippets directly inside VS Code.

Remote - SSH — VS Code extension that lets you open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.

SVG Preview — Preview SVG files inside VS Code, with live editing capabilities, including pan and zoom and ability to live edit SVG inside other files.

Omni Owl Theme — A dark VS Code theme based on two other popular VS Code themes.

VS Code Articles & Videos

Open-sourcing the Sorbet VS Code Extension — If you're a Ruby developer, this post from January about a recently open-sourced VS Code extension might be of interest.

► Sticky Scroll — A short video briefly demonstrating an absolutely genius new feature recently released in VS Code.

Visual Studio Code's New Editor Sticky Scroll Feature - Never Get Lost In The Code Again! — Same topic as the previous link, but this time an article with a few animations and further info.

Get Smarter Every Day — Every day Refind picks 7 links from around the web that make you smarter, tailored to your interests. Loved by 50k+ curious minds. Subscribe for free today.   Sponsor 

Best of the Rest

CotEditor — A lightweight plain text editor for Mac with syntax highlighting, split editor mode, character inspector, scriptable with macros, and more.

Code Golf — A game designed to let you show off your code-fu by solving problems in the least number of characters.

Vifm — A Vim-like file manager that gives you complete keyboard control over your files without having to learn a new set of commands.


Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris
Copyright © VSCode.Email. All rights reserved.

Not affiliated with Microsoft, Visual Studio Code, or any of its trademarks.