Skip to main content

Navigating VS Code With Your Keyboard

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:

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.

  • document which-key mneumonics
    • show a mermaid diagram (or similar representation) of how keystrokes alphabetically map to quick execution of everything I ever do?
    • link to dotfiles file for details like command names and whichkey syntax

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.

Inbox

  • Navigating VS Code With Your Keyboard
  • My favourite thing about Vim is that you can do everything without touching your mouse
  • I’ve been trying to do the same with VS Code
  • My favourite thing about VS Code is that when you open it, it just works. No broken plugins. No weird errors. No need to spend hours configuring and debugging it. It’s supported by a large team and it just works.
  • I wanted to keep that simplicity while also being able to navigate VS Code without touching my mouse
  • Combine my favourite aspects of Vim and VS Code
  • First step was the Vim extension, but that only covers in-editor actions
  • Needed a different solution for navigating between UI elements and inside panels
  • Tried a few different extensions, but WhichKey was the best
  • Can use the command palette, but it’s slow to have to stop and search for each command as you need it
  • Could memorize all of VS Code’s default keyboard shortcuts, but they are verbose and pretty random and not easy to remember
  • WhichKey allows you to create your own short, labelled shortcuts for the commands you actually use
  • Break down by workflow category (e.g. navigation, editing, etc.)?
    • Which tool is best for each category
    • Limitations of each tool and why you need to add another
  • vs code: keyboard workflow: lazygit in integrated terminal
    • or figure out all shortcuts?
  • break into separate notes by feature?
  • integrated terminal shortcut to scroll to the beginning of the output for the last command (i.e. the previous prompt)?
  • Settings Cycler - Visual Studio Marketplace
  • Options that don’t quite work:
    • Use command palette:
      • many commands are there, but some are not (e.g. menu and list navigation)
  • Enable VSCodeVim Neovim integration to get more powerful commands
  • 📺 Top 10 VS Code Keyboard Shortcuts for Maximizing Productivity • 8 minute video by Suboptimal Engineer showing how to navigate the editor panes and your project files using keyboard shortcuts
  • VSCode with embedded Neovim • chris@machine 📺
    • Apparently includes which key
    • Curious to see if embedded neovim is actually nicer than the VSCodeVim plugin…
  • THE BEST VIM CONFIG FOR VSCODE | configure vscode like vim • Joaquin Varela 📺
  • VSCodeVim extension:
  • VSCode Neovim extension:
    • vscode-neovim • Vim-mode for VS Code using embedded Neovim. 🛠️
    • try it out (may be faster; may be easier to configure key maps for)
    • at the very least, get inspiration from their default keymaps
  • My VS Code Setup • Caleb Porzio 📖
    • better terminal toggling shortcut (that removes having to toggle 3x in a row to open the terminal) looks worth trying