Enhance Productivity with Vim and Visual Studio Code
Disclaimer
First of all, I want to clarify that I am not a Vim expert nor an experienced programmer in the industry. In fact, it wasn’t until recently that I was lucky enough to be introduced to the awesome combination - Visual Studio Code and Vim. To be honest, the experience is truly extraordinary.
Before You Read
Anyone can benefit from this post. However, this post is written by a Mac user (that’s me). Therefore, all shortcuts and installation guides are geared towards Mac OS. Here is the list of Mac’s keys that I will use later in this post:
⌘ command
⎋ escape (esc)
^ control
⌥ option (alt)
⇥ tab
⇧ shift
⇪ caps locks
↩ return (enter)
The What and Why of Vim?
As a developer, I always look for shortcuts (keyboard shortcuts not life shortcuts) just because I find switching between keyboard and mouse is somewhat inefficient. Luckily, for text editing, Vim has solved this problem.
How did Vim do it? By its own description, “Vim is a highly configurable text editor for efficiently creating and changing any kind of text”. By changing the way you interact with text, Vim allows both of your hands to always stay on the keyboard; that is, no mouse is needed while editing text. In the hand of a Vim wizard, magic can be pulled off.
Cool! How efficient can Vim be? With different modes, not only can Vim get rid of the hassle of switching to a mouse while editing text but it also reduces the amount of movement of your fingers. There are three basic modes in Vim, which we will dive into shortly. Another reason to consider Vim is its ubiquity; I can not name an operating system that does not support Vim.
Why VSCode? Isn’t a Vim Good Enough?
Vim can be very powerful, but setting up debugging tools, syntax highlighting, intelligent code completion, snippets, and code refactoring is not an easy task, especially if you have to do all that for each language and framework.
From my experience, Visual Studio Code’s Marketplace provides powerful extensions including Vim emulation, which can combine the power of this tool and the rich development experience of VSCode to make setup a snap.
To show you how quick and easy it is to use let’s install and configure the Vim extension of Visual Studio Code:
1. Open Visual Studio Code
2. Go to Extensions (the highlighted square on the left sidebar)
3. Search for “Vim”
4. Click install on the following plugin (personal recommendation)
5. Go to VSCode’s Settings (by typing ⌘,)
6. Search for “Vim” in Settings
7. Custom Vim Extensions however you want or you can follow my recommendation in the following steps
A couple of options you might want to consider:
a) Vim Easymotion: Looking at this repo can help you explore the plugin.
b) Vim Sneak: I highly recommend this one for the ease of searching text in a file. We will discuss this plugin further in this post.
c) Vim Status Bar Control: This one is self-explanatory.
The Gist of Vim
Normal mode
Even though it is called “normal” mode, it is not normal, in my opinion. Nevertheless, this is the default mode when you open a Vim editor and the central mode of Vim since we are spending more time on navigating and reading code rather than inserting text. In this mode, you can navigate through texts like a breeze without using a mouse or reaching to arrow keys. Here are some of the common navigation Vim tricks.
hjkl are the keys to replace arrow keys in normal mode. This way you can navigate without moving your fingers out of place (to the arrow keys).
h ←
j ↓
k ↑
l →
These are some basic motions that I usually use:
w moves to the next word (or ⌥→ in VSCode)
b moves to the previous word (or ⌥← in VSCode)
gg moves to the top of the page
G moves to the bottom of the page
0 moves to the beginning of a line
$ moves to the end of a line
{ moves to the previous paragraph
} moves to the next paragraph
^d moves down half a page
^u moves up half a page
Counts: Using {count}{motion} to empower the above motions. For example, 2b means moving the cursor backward two words. Or if you want to move up one page, typing 2^u would do the trick.
{lineNumber}gg moves to a specific line
Operator: {operator}{count}{motion}. There are 3 common operators:
c change
y copy
p paste
For instance, c5w would delete the next 5 words and enter insert mode. Another good one is typing ci” after moving the cursor between two double-quotes. That would delete everything between the two double-quotes and start insert mode.
Insert mode
Insert mode is the most straight forward one. This mode is probably what you are familiar with. It is the same mode that you use in your normal editor (VSCode, Atom, Sublime Text, or even Microsoft Word, etc.) to insert and delete your text. To switch to normal mode, you can type ⎋ or ⌃c.
The efficiency stems from switching from normal mode. All the following commands will switch your editor from normal mode to insert mode.
i puts insert cursor before the current character
a puts insert cursor after the current character
I puts insert cursor at the beginning of the line
A puts insert cursor at the end of the line
Two commands that I find very useful are:
o inserts a new line below and start the cursor on that line
O inserts a new line above and start the cursor on that line
Visual mode
This mode is also very simple. It assists in highlighting/selecting a text, which we usually perform with a mouse. To enter the visual mode, we can use these two basic commands:
v starts highlighting a character at a time
V starts highlighting a line at a time
At first, you might think that it is slower than a mouse. It’s not. It makes highlighting even faster and more precise by enabling highlighting to use with any navigation keys in the normal mode. For instance, V} highlights everything from the current line to the end of the paragraph.
Some more Vim commands that I use
dd deletes the current line
yy copies the current line
p pastes whatever you have delete/copy in normal mode
Have you ever encountered a situation where your cursor is at the last line but it is on the top of the page? That means you can only see the last line.
zz moves up half a page (but the cursor would stay on the same spot)
I recommended enabling Vim Sneak for a good reason:
s{char1}{char2} jumps to the next word that starts with {char1}{char2}
S{char1}{char2} jumps to the previous word similarly.
This is a better way to navigate to a specific word compared to the built-in f{char} since two words enhance the precision. To move to the next occurrence, use semi-colon(;) and comma(,) for the previous one.
.(dot) repeats any previous command
With Vim Sneak, navigation becomes much more powerful; thus, your Vim command can be as complicated as vsco; which highlights everything from the current cursor the second occurrence of a word that starts with “co”.
VSCode Shortcuts
There are ways to search and replace using Regular Expression using Vim. However, in my opinion, it is good enough to use built-in search-replace functionality of VSCode using ⌘f for search and ⌘r for replacement.
To navigate between files, it is convenient to just use VSCode shortcuts.
^⇥ navigates to the most recently opened file
⇧^⇥ navigates to the least recently opened file
⌘p and type in the file’s name that you want to open or navigate to
⌘⇧f and type in a word or a Regular Expression to find the word in all files
Map ⇪ to ⎋ and/or ^
If you have tried Vim, then you would have noticed that switching between modes (mostly between normal mode and insert mode) is a tyranny when having to reach to ⎋ or ^. Since ⇪ might not be used that much, mapping ⇪ to ⎋ or ^ is highly recommended by The Vim Community.
You might wonder: “Isn’t ⎋ enough for switching back to normal mode?”, “Why did I mention ^ for ^c?”, “Isn’t ^c more typing?”. Well, it is a controversial topic. Initially, I mapped ⇪ to ^ for a couple of reasons:
1. ^ is also hard to reach
2. I only use ⎋ for Vim and Vimium (a Chrome Extension that enables surfing the internet with Vim)
3. I use ^c or ^d for terminating a background thread or a running task in the terminal
4. I use ^ for a couple of shortcuts in VSCode and other applications
5. There are also a bunch of commands in Vim that need ^
^d moves the cursor down half a page
^u moves the cursor up half a page
Therefore, I’m happy with ⇪ is mapped to ^ if I have to choose one
Luckily, we don’t have to choose. We can map ⇪ to both ⎋ and ^ with Karabiner or Hammerspoon. Since we usually bind ^ with another key, it makes so much sense for these two libraries to map ⇪ to ⎋ for a single click, and ⇪ to ^ for a hold. From my experience, Hammerspoon does its job.
Now What?
Hopefully by now you agree with me that the combination of Vim and VSCode not only enhances your productivity but also increases the comfortability of editing text. No one is expected to remember and apply all these commands after reading this post. Vim itself has a decent learning curve, but don’t worry, it’s not at all steep if you have VSCode on your side.
If you are new to Vim, then you should start by avoiding using your mouse as much as possible. Using Vim with VSCode allows you to switch back to your mouse whenever you don’t feel like using Vim (please do). This can make the learning curve much more gentle for beginners.
If you are somewhat familiar with Vim, you can cherry-pick your favorite commands and apply them right away. To learn more about Vim, vimtutor is a great resource (just type vimtutor in your terminal).
If you are a Vim expert, I should read your posts then.
