VS Code Keyboard Workflow

Goal

Never touch the mouse. All VS Code actions (including all UI navigation) should be doable with the keyboard in as few keystrokes as possible.

Three tools combine to make this possible:

1. VSCodeVim extension
2. WhichKey extension
3. VS Code Keyboard Shortcuts

VSCodeVim extension

Use Vim motions and commands to search, edit and navigate files.

Non-standard commands:

• Surround:
  • in visual mode, use S instead of {operator}s to surround a selection
  • use )}] (closing symbol) instead of ({[ (opening symbol) to surround without spaces

Links:

• VSCodeVim extension 🛠️
• Boost Your Coding Fu With VSCode and Vim • Jaime González García teaches how to get the most out of the VSCodeVim extension with a book, cheatsheet, podcast and video series 📚🎙️📺

WhichKey extension

Create shorter versions of VS Code’s default shortcuts for all UI navigation. Borrows the concept of a “leader key” from Vim as the starting point for all shortcuts.

Examples:

• space to open the WhichKey menu (while in normal mode in an editor)
• ctrl+, to open the WhichKey menu while outside of an editor

See my "whichkey.bindings" settings in ooloth/dotfiles/vs-code/settings.json.

Custom Keyboard Shortcuts

Create custom keyboard shortcuts for all remaining VS Code actions.

Examples:

• jk to navigate menus that don’t include a search field
• ctrl+jk to navigate menus that include search field (e.g. quick open, command palette, search view, etc)
• ctrl+[] to move between editors
• cmd+ctrl+[] to move between panels
• ctrl+hjkl to move between editor, terminal and UI panes
• cmd+ctrl+hjkl to resize terminal panes

See my custom keybindings in ooloth/dotfiles/vs-code/keybindings.json.