16 January, 2024

Work Faster in VSCode Without Needing a Mouse

by Giles Knap

Every few years I have a go at learning to use my IDE without a mouse. I’ve put hours of effort in and always failed. That is until I purchased a ZSA Voyager keyboard a couple of weeks ago.

In this post I’ll explain how I have achieved this and provide details on how you can do the same. Although I’m using the Voyager, these tips will work for many keyboards, but you will get the best results with a keyboard that is:

Why the Voyager

There are a few things that the Voyager brings that have helped achieve (near) zero mouse use in VSCode.

  • The compact, ortholinear layout lets you feel your way around easily, never have to stretch your fingers and never lose the home keys. Therefore you never need to look away from the monitor.
  • The above means you are so comfortable that moving a hand to the mouse really feels like it is disrupting your flow.
  • The ability to program a Hyper key means that you can assign a bunch of VSCode keybindings without constantly clashing with other keybindings.
  • Finally, you can program the keyboard to operate as a mouse so that for minor mouse use where you have failed to bind or remember a function you can still keep your hands in place.

Hyper Key Bindings

Having a single key to press ALL the modifier keys simultaneously allows for creating a set of keybindings that do not clash with any existing keybindings in VSCode. There are so many keybindings that it has always been hard to create a useful scheme without finding you have overridden an essential feature.

I have programmed a Hyper key under the left thumb and then assigned all of the right hand to features that navigate between panes and arrange panes in VSCode. These IDE layout functions are the most common ones for which the mouse is frequently used.

The ortholinear layout allows for a relatively intuitive placement of these functions. Here is an image to help remember the placement:

navigation keys

The necessary vscode keybindings to go with this layout can be downloaded from here.

You should merge this file into your user keybindings file. Use the menu command File > Preferences > Keyboard Shortcuts to open your user keybindings. These bindings are designed not to clash with existing defaults and they don’t delete any existing bindings.

One problem with trying to memorize the default bindings is that there are separate functions for similar operations. e.g. next error in a Code Editor and next change in a Working Tree editor. Where possible I have used a single keybinding to multiple similar functions, chosen by the context.

Other Useful Keys to Remember

In order to complete the transition to mouse-free use, I created a list of the remaining useful functions that have relatively accessible default keybindings.

This section will not be useful for those that love Vim or some other non default scheme. For someone who likes the defaults or who has never changed them, like me, this list may come in handy. Memorizing these in combination with the above Hyper keys was enough to allow me to stop using a mouse.

Keyboard Configuration

Some bindings below have multiple modifiers. These are good candidates for programming into your keyboard. I have done this in my Voyager config, for those combinations using Alt Shift.

Here’s my Voyager keymap:

It is a great idea to have the Application Key configured. This will give you the context menu, equivalent to right mouse click on the currently focused item.

On standard keyboards the application key looks like this:

Application key

Breadcrumbs

This deserves its own heading, as it is such a useful way to navigate all the folders in your workspace and all the code sections within each file.

KeyAction
Ctrl Shift .Focus breadcrumbs
Navigate breadcrumbs
SpaceOpen current file or jump to current section

Selection Management - Especially Multi-Cursor

KeyAction
Alt Shift Expand selection
Alt Shift Shrink selection
Alt Shift iAdd cursors to end of all selected lines (the 2 below can easily do cursors on start)
Ctrl Add a cursor below
Ctrl Add a cursor above
Ctrl Add all found words to selection
Ctrl dAdd current word / next matching word to selection
Ctrl uUndo last selection / cursor motion

Navigating the Explorer

And other tree views like search results, git history, etc.

To get quick focus on these I suggest adding some more Hyper keys. Indeed the keybindings.json linked above already has some. Or use Hyper I and then a couple of Hyper J to focus on the Activity Bar (extreme left list of icons), then select any of the explorer panes from there, using and Enter.

KeyAction
Navigate (Shift for multi-select)
letterJump to next file starting with letter
Shift letterJump to previous file starting with letter
SpaceOpen the current file in a preview editor, keep explorer focus
EnterOpen a file or all selected files in editors
Ctrl EnterOpen current file in a new editor group to the right
F2Rename current file
Application KeyContext Menu - VERY useful!

Navigating Code

See Hyper Key Bindings above for navigating changes / errors.

KeyAction
F12Jump to definition
Application KeyMenu for ALL code inspection options
Ctrl .Quick Fix - VERY useful!
Ctrl SpaceCode completion suggestion

Terminals

See Hyper Key Bindings above for splitting and resizing terminals.

KeyAction
Ctrl Shift `Open new terminal (back tick)
Ctrl PageUp/PageDnSwitch to prev / next Terminal Group
Ctrl / Scroll to previous / next command input
Ctrl Shift / Move SELECTION to previous / next command output
Ctrl Shift C / VCopy / Paste SELECTION

To get the output from a terminal command into an editor window:

  • Select the one you want with Ctrl arrows and Ctrl Shift arrows.
  • Ctrl Shift C to copy
  • Ctrl 1 switch to first editor group
  • Ctrl n for new window
  • Ctrl v to paste

Above is a good candidate for a keyboard macro if you have such a capability.

Menus

KeyAction
AltShow menu bar
Alt Shift OOpen Remotes / Dev Containers menu

Don’t Forget

Every single command is available via the command palette Ctrl Shift P. It is really useful for the obscure things like clearing all the pop up notifications, which has no default key binding. It’s also great if you forget a keybinding, as it will remind you of the binding once you find the command.

Summing Up

Have I really stopped using the mouse altogether? Not quite, I certainly still reach for it when switching to a browser. I also don’t find the selection of text in VSCode terminals that consistent. It is almost brilliant, but falls a little short, so that now selecting text is only time I still use the mouse within VSCode.

On this final, successful attempt to eschew the mouse, I found I reached a tipping point. I had got far enough that each time I got stuck, instead of reaching for the mouse, I looked up and memorized a new shortcut, even outside of VSCode. If you get to that point, you have cracked it!

This has been a huge change for me; my workflow feels significantly smoother and faster, plus my RSI issues are fading fast.

I’m going to continue on this journey of keyboard skills improvement and you can track updates to my notes here if interested.

Giles Knap

Giles Knap

I am a Software Engineer working for Diamond Light Source, the UK's National Synchrotron.

The Ergo
Thank you for creating a newsletter I WANT to read, instead of an auto delete.
Joel Jackson

Subscribe to The Ergo, our monthly newsletter. Even people who aren’t into keyboards seem to love it. Great finds from all over the Web, and a nice coupon for new subscribers (10% off the ZSA Cards, our card deck).

Success!
One issue per month, unsubscribe anytime.
See it first

© 2023 ZSA Technology Labs, Inc.