VSCode + Vim

04 Jan, 2023

After many years of using neovim exclusively, I recently switched full time to VSCode. I find it much quicker (I am fortunate enough to have a 64gb M1 max MBP), much easier to optimise, and there is such a suite of helpful extensions that work with one click. Working in front-end frameworks, Solidity or Rust is now a pleasure with all the required language servers handled for me automatically. Meanwhile, neovim requires one to pray to the vimscript or lua gods when installing a plugin, and retroactively hodge podge macOS compatibility by creating a linux like file structure (think .config .local .share etc).

I didn't realise quite how powerful VSCodeVim could be, and I was using it only for text editing within the code window.

Luckily, my friend sent me a link to someone's very well explained VSCodeVim settings.

Keybindings

{
    "vim.normalModeKeyBindingsNonRecursive": [
        {
    		"before": ["<C-j>"],
    		"after": ["<C-w>", "k"]
    	},
    	{
    		"before": ["<C-k>"],
    		"after": ["<C-w>", "j"]
    	},
        {
     		"before": ["<Leader>", "s", "b"],
      		"commands": ["workbench.action.toggleSidebarVisibility"]
    	},
        {
      		"before": ["<Leader>", "e", "f"],
      		"commands": ["workbench.explorer.fileView.focus"]
    	},
   ]
}

The first two bindings allow you to use vim like navigation across VSCode - i.e. jump focus down to terminal with Ctrl + J, jump back up to Ctrl + K. Weirdly, I found I had to switch "j" and "k" to get the intended behaviour.

The last one is super handy, but make sure you set "vim.leader": "," in your settings.json.

,sb can now toggle the sidebar ,ef now lets me jump to the file explorer.

File Explorer Bindings

Click here for a comprehensive set of vim like bindings for navigating in and interacting with the file explorer in VSCode.

With these, one can copy (y), paste ( p ), open files to the side (s), create files (a) + folders (A), collapse folders ( c ), rename ( r ) when the VSCode explorer is focussed.

Rather annoyingly, the default behaviour (seemingly, on MacOS at least) is that "Enter" renames a file, instead of opens a file. Thankfully, you can remap this with:

  {
    "key": "cmd+enter",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus"
  },
  {
    "key": "enter",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus"
  },
  {
    "key": "enter",
    "command": "list.select",
    "when": "listFocus && !inputFocus"
  }

With these bindings, I have a vim-like keyboard navigable VSCode. The workflow is focussed around jumping from the main editor over to the file explorer, create and make new files if necessary, and open them with my focus jumping over to the file immediately.

Thanks for reading and happy new year 2023!