Vim + VS Code = <3

The relationship between a software developer and a text editor is a strange thing. But I’m going to share with you how I became a fan of Vim, and how using Vim with VS Code has made me a very happy software engineer.

There have been times when I tried out a new editor every couple of weeks, and times when I stayed faithful for years. When I first started toying with Linux, I learned enough Vim to troubleshoot X11 configurations and author git commit messages, but every :wq found me relieved to get back to my GUI.

Years later, a friend told a story about a co-worker who stayed late one night to uninstall every IDE and GUI text editor in the office. To my shock, the story ended with my friend as a happy Vim user.

I was curious, so I tried it on my machine. I, too, became a happy Vim user. And now, I’m also a happy VS Code user.

Use the Official VM Extension for VS Code

The official Vim extension for VS Code is pretty great. This extension gives you all of the usual Vim navigation and editing powers. It supports most commands that alter the buffer (e.g. :s/emacs/vim/g), and some others as well (e.g. :vsplit to open another vertical pane). And, it emulates a few key plugins by default, like vim.surround and vim-commentary. I found some cool new stuff, too. For example, hitting gd in normal mode will take you to the definition of whatever symbol is under the cursor. Similarly, gh will invoke the hover state to reveal type info and linter errors.

My favorite thing about using VS Code in Vim mode is that you can use the usual VS Code settings files to map Vim keystrokes to all kinds of editor actions.

For example, when I use Vim in a terminal, I use the CtrlP extension and map <leader>o to Ctrl+P. VS Code has a built-in fuzzy file search, so I can achieve the same thing without a plugin like this:

"vim.normalModeKeyBindingsNonRecursive": [
    {
        "before": ["<leader>", "o"],
        "after": [],
        "commands": [
            {
                "command": "workbench.action.quickOpen"
            }
        ]
    },
]

Similarly, you can invoke anything you might want to do in the editor (find text in the whole project with <leader>f, or open the VS Code command window with <leader><leader>) with a couple of keystrokes from normal mode. For those of us who keep our fingers glued to the home row, it’s super powerful. To discover all of the available command IDs and their default keybindings, select Preferences: Open Keyboard Shortcuts File from the command menu (⇧⌘P or F1 or, you know, <leader><leader>).

It’s Not Without Its Rough Edges…

Because Vim mode is supported via an extension, there are a couple of frustrations:

• The extension doesn’t load instantly, and is only active when you’re focused on an editing buffer. If your focus is in the welcome screen or the sidebar, you won’t be able to use Vim shortcuts to open a file, for instance. And occasionally when I’m in a hurry, I type garbage into a file by entering commands during the short window of time between the VS Code’s starting and the extension loading.
• The Vim command line doesn’t currently support tab completion or command history. If you’re doing text replacements or other lengthy-ish commands, this can be a bit frustrating compared to Vim’s command line.

Other Cool Stuff About VS Code

• The debugger is about as powerful as any I’ve seen in a full-blown IDE, and configurable via simple JSON.
• Emmet support is built-in, so you can write blocks of HTML with a really concise shortcut syntax, like ul>li*3>a[href="#"]{placeholder}
• The built-in command window makes pretty much everything accessible via keyboard, and the instant filtering makes commands easily discoverable. I found the built-in Format Document by accident. I use it all the time to clean up ugly JSON and XML. Extension commands are also accessible here, as well.
• VS Code and extension settings are in a simple JSON file, and the settings interface includes a commented, searchable list of defaults. You can configure so many things for the Vim extension. Just type vim in the search box and see all of the available keys. I kinda miss the simplicity of .vimrc, but I have found the Settings Sync extension pretty good for copying settings between machines.

But, Do What You Want

I’m sure my experience won’t convince every VS Code user to try Vim (check out Adam’s post if you’re on the edge), and I know most Vim users will never go for a ‘bloated’ editor like VS Code, but I’m finding this setup to be an excellent middle path right now.

---

Jason Pollentier Languages VS Code