Using vim with VSCode
In this post, I share some tips about using the vim plugin in VSCode. The plugin is an excellent option to try out another way of editing code and get a feel for it. It allows you to dive into using vim modes and motions with little to no configuration. You do not have to spend hours making vim work with your linter, formatter, or file extensions. By using vim consistently with VSCode, you will already have your favorite shortcuts and motions if you decide to move away from VSCode later.
Nowadays, I use mostly neovim, but using the plugin for a while was very helpful to make that transition smoother. If you feel like taking this jump, let's get started!
First, let's install the plugin: Vim. Once you relaunch your code editor and open a file, you will see on the bottom bar
NORMAL, which is one of the vim modes. Your cursor will also look a little different.
Remember Vim and its modes
Vim has several modes. Each mode has its keyboard shortcuts and motions. The three most common:
commandmode): this is the mode you should use most of the time. In
normalmode, you can move around your file using
gg, search for a term (
/Garyto search for that name), etc.
insert: it is the mode you use for writing text. When you want to add some code, you enter the
insertmode by typing
visual: It is the equivalent of using your mouse to select some text. Just type
vto enter it. You can select the whole line in visual mode with
last line mode: you enter it with the
:. In this mode, you can do things like opening a file (
:e nameOfYourFile), saving it (
:w) and exiting vim (
If you are unfamiliar with vim,
vimtutor is a great way to get started.
I also cannot recommend enough this playlist on youtube by the Primeagen. This series of videos will teach you enough to get started using vim productively.
You can first customize things like the
leader key or set up relative line numbers when using the plugin. The
leader key in vim is the key you use alongside one or more other keys to create a keyboard shortcut most of the time in normal mode. When they start configuring their
vimrc, people add
remaps. The whole idea of remaps is to create shortcuts to do certain things. You can create a shortcut to toggle the sidebar, go back and forth between your last two files, etc.
In VSCode, you can also create your shortcuts and choose your leader key. The
space are popular choices for the leader key. Once again, try out a few different keys and see what feels right.
You can add some customizations directly in your
settings.json. For example, my vim settings are:
"vim.leader": " ",
"vim.leader": " ",is to use space as my leader key
vim.hlsearchis to highlight the search. When you are in
normalmode, you can use
/and search for whatever input in your current file.
vim.useSystemClipboardis a must-have. It ensures that you can copy something in your file and store it in your system clipboard (the same thing for pasting). By default, Vim does not use the system clipboard, and it can be a frustrating experience. If you do not use this setting and want to copy something to your system clipboard, you will have to use
vim.smartRelativeLine: this one was a life-changer for me to get faster moving around in normal mode. Instead of line numbers, you only see the line number of your current line. The number before every other line is relative to your current position. You can go, for instance, to the line that is two lines above your current line doing
Creating custom shortcuts
Remaps are the secret sauce when you start using vim as your primary code editor. You can associate whatever action you often do with a keyboard shortcut. In VSCode, you can already get a feel for some of the customizations you can create.
Some of my shortcuts:
"before": ["<leader>", "n"],
"before": ["<leader>", "r", "r"],
"before": ["<leader>", "r", "f"],
"before": ["<leader>", "p", "s"],
vim.normalModeKeyBindingsNonRecursive sets those shortcuts in vim's normal mode only. The
before property is the keyboard shortcut. You put your keyboard combination in an array. The
command is what you want this combination to do. You can create shortcuts for some of the VSCode editor actions. I use the
rename action a lot (normally works with
F2), so I created a little shortcut that is easier for me. It can quickly become a little rabbit hole, but there is a full documentation of all the existing keybindings. A good exercise is to find which ones you commonly use and whether or not you could improve the existing keyboard shortcut.
In the example above:
Kis helpful to show the definition and the detail about a function or a variable. It is the keyboard equivalent to hovering over a function with your mouse.
- You can also create shortcuts to work with some plugins. I use the
leader r fis to rename the current file, for instance.
Extending vim power with some plugins
You can activate a couple of vim plugins in VSCode. A vim plugin, just like in VSCode, adds some extra functionalities to vim that can be very useful.
The plugin I recommend activating is
vim-surround. It makes it easy to modify brackets, quotes, and other surrounding elements. You can activate
Vim: Surround in your vim plugin settings.
With this plugin, for example:
- You can change single quotes into double quotes (
- You can rename an HTML tag with
Check out the documentation for more tips about vim surround.
Some of my favorite vim motions
When you get started with vim, try to stay in
normal mode as much as possible. This is the secret to becoming fast with vim. Some of the motions I use the most in
ggto go to the top of the file
Gto go to the bottom of the file
Fto move to a particular letter in a line. For instance, if you have the text
Hello thereand are at the beginning of the line in normal mode, you can type
ft,and your cursor will be on the letter
zzto center your current windowpane at the line you currently are
0wwhen you are in the middle or at the end of a line to go back to the beginning of the line
Dto delete the rest of the line
ddto delete the whole line
ccto delete the entire line and be directly in
insertmode on the same line
- a number +
5k) to move to a specific line
- When editing HTML,
citenables you to directly edit the tag's content. It puts you in insert mode inside of the tag (small warning: if there is some content inside the tag, it will get deleted)
uto undo whatever weird thing can sometimes happen when editing with vim...
Bonus: moving a code block up or down in visual mode
I remember watching a presentation on React by Ryan Florence and seeing this trick for the first time. During the talk, he highlighted a code block in visual mode and moved it up and down without cutting and pasting. If you want to do something similar in VSCode with vim, add these to your
You can now select a code block in visual mode and move it up with
K or down with
Conclusion and further resources
If you want to test vim out, using the plugin in VSCode is a great start. If you feel like going further, here are some more resources:
- ThePrimeagen youtube channel
- Changelog has some great podcast episodes about vim