Toward a Mouse-Free Developer Experience in VSCode
Long have I dreamed of being one of those ninja developers who don’t touch their mouse. If you’re not acquainted, most of these keyboard-only wonders work in Vim or Emacs, which, in the words of a certain immortal cartoon character, “have a lot of typewriter in them”.
These editors rely heavily on hotkey combinations, and in the case of Vim, editing modes, essentially creating one set of keybindings for navigation and one set of keybindings for editing. They also provide near-limitless customizability through their own scripting languages. Spacemacs, a community driven distro of Emacs, attempts to address some of Emacs more complex keybindings by adopting much of Vim’s keyboard layout and editing modes
After some failed attempts to switch over to Emacs/Spacemacs/Vim, there are some big VSCode features I’m not quite willing to leave behind (I’m looking at you, multicursor (yes yes I know about macros)), And there are a number of concepts I wasn’t prepared to reacquaint myself with (Killring vs traditional clipboard). On top of this, I just plain didn’t like Emacs keybindings, and had a lot of trouble setting up Spacemacs (forced to switch to developer branch on day one just to get org mode running).
Ultimately, when it comes to Vim/Emacs/Spacemacs, I was forced to conclude that the amount of time Iwould spend unproductive would never replace the time Iwould save, and that future customizations would shut me down for hours.
All that said, Vim has some very powerful ideas related to modal editing that I wanted to capture in my existing, mature VSCode workflow.
So here’s how I went about this:
Step 1 — Learn the VIM keybindings
Before you even begin integrating Vim-like keybindings into your workflow, you need to invest some time into just working with the keybindings, as they’re pretty foreign compared to most other editors.
A great place to get started is with vim adventures — https://vim-adventures.com/ (the free demo should be enough to get you going). Don’t even worry if you need to use a walkthrough! it’s not really about guessing the answer, it’s about getting your fingers used to this style of navigation
It’s also good to keep a Vim keybinding cheatsheet handy for a while:
Step 2 — Swap Esc and Capslock
I’m lucky enough to use a mechanical keyboard with remapping software and macro keys, there are also other software solutions, but it gets you away from accidental capslocking and having to move your fingers off home row to jump out of a Vim mode.
Step 3 — Install Vim extension for VSCode
While this extension is more complex than it’s major competitor, simple vim, it lets you fully control the keymappings in each mode. I use this to bootstrap a lot of good quick-access features onto Normal Mode (this is the primary mode for navigation)
Essentially Iborrowed the mnemonic method and Spacebar-chords from Spacemacs
Here’s my json settings relevant to the vim extensions
"vim.normalModeKeyBindings": [{"before": ["<space>"],"commands": ["workbench.action.showCommands"]}],"vim.insertModeKeyBindings": [{ "before": ["<C-]>"], "commands": ["editor.action.indentLines"] }, { "before": ["<C-[>"], "commands": ["editor.action.outdentLines"] }],"vim.handleKeys": {"<D-d>": false,"<C-x>": false,"<C-a>": false,"<C-f>": false,"<C-c>": false,"<C-v>": false}
Shat does this do for me?
Normal mode keybindings — this gives me spacebar to open command pallete when I’m not editing the document, since I’m attempting to move to a keyboard only workflow, rapid access to the command pallete is vital, and I’m borrowing this idea from Spacemacs
Insert mode keybindings — this preserves a handy-dandy VSCode feature for rapid indents on ctrl+[ and ctrl+]
vim.handlekeys — this preserves the ctrl+x/c/v cut/copy/paste behaviour that I have 30 years of muscle memory building up. Also it frees up selectAll (Ctrl+a) and find (Ctrl+f) behavior
These settings also prevent the default vim extension method of selecting the next occurance of the currently selected word, which is a bit broken for me.
Which brings us to
Step 4 — custom keybindings like crazy
There are a lot here — one way I got around this was to use my keyboard’s macroboard, you can also pick up macro boards like the falcon 20 or, on the pricier side, the stream deck (there are linux drivers available for stream deck, but no gui for configuration, you’ll need to build it in nodejs from what i can tell).
Some of these are still defaults
space -> command pallete (set in vim extension settings - see above)Ctrl + Tab -> change editor to a different open fileCtrl + shift + up -> multicursor up (insert mode)Ctrl + shift + down -> multicursor down (insert mode)Ctrl + shift + l -> multicursor all matches of selection (insert mode)Ctrl + shift + m -> exit multicursor modeCtrl + / -> toggle line comment (insert mode)Ctrl + shift + left -> shrink selectionCtrl + shift + right -> expand selectionCtrl + , -> open settingsCtrk + ` -> open/close and focus to terminal without killing it (that's the backtick/tilda key, like in quake)F3 -> next match (while using find within document)Shift + F3 -> prev match (while using find within document)// below are chords so the first one would be Ctrl+space-Ctrl+fCtrl + space - f -> focus to the file explorer paneCtrl + space - o -> open folderCtrl + space - x -> close focused editorCtrl + shift + space - f -> open the find pane to search within documentCtrl + space - e -> focus to current active editorCtrl + space - g -> focus to search fieldCtrl + space - L -> focus to search pane ListCtrl + space - T -> Create integrated terminalCtrl + space - ` -> focus to existing terminal (that's the backtick/tilda key next to the one, like in quake)Ctrl + space - z -> switch to zen mode Ctrl + space - b -> hide/show sidebarCtrl + space - w -> toggle word wrapCtrl + k - b -> open keyboard shortcutsCtrl + f - n -> add new file (explorer)Ctrl + f - m -> add new folder (explorer) Ctrl + t - k -> kill current active terminal instanceCtrl + space - c -> Wrap down prefix console log (this uses the Console Log extension from Luis Gonzales which I highly recommend for quick JS debugging)Ctrl + space - r -> refresh explorer (occasionally the explorer will not update files in a project folder without this)
Step 5 — VSCode style select next
This is tricky
You need to initiate it from Visual Mode (v)
Once you’re in visual mode highlight your selection and Ctrl+d as you normally would to select subsequent occurances, once you have the selections you want escape to normal mode and then press i to enter insert mode, now you have all your cursors exactly where you want them
step 6 — other programs
I use Guake terminal, which unfortunately is incompatible with alt-tab — fortunately there’s a setting for it which makes it so you can only minimize it while it’s focused, and otherwise it will gain focus when you hit it’s assigned hotkey.
Conclusion
This is my first phase and I’ll likely be posting updates. certainly some aspects like multicursor seem like they’re adding complexity, however I’m convinced that I can, for the first time stop reaching for my mouse.
