Learn Enough Vim to Be Useful
What’s the big deal with Vim anyway?
I used pen and paper to learn how to code. I did not own a computer, so I wrote my C++ programs in a notebook and took it to my buddy’s place during the weekends to run them. Imagine how it must have felt when I finally got my own laptop and was able to write programs on an IDE. That’s the kind of upgrade that you don’t really have to put any effort into and gives you quick results. We will call this the “tool upgrade.”
Let’s consider another kind of upgrade: touch typing. I was a working programmer when I was learning to type. It was slow, inefficient, and messy initially. It took longer to type code than if I had just looked at the keyboard and it was also difficult to think about the program I was writing while paying attention to my finger movements. But once the muscle memory kicked in, it didn’t matter what software I used for typing. I could still be productive with it. We will call this the “skill upgrade.”
People switching IDEs look for “tool upgrades” to boost productivity. Switching to Vim is not a “tool upgrade” but rather a “skill upgrade.” In my current job, I use PhpStorm. In my previous one, I used VS Code. Having a Vim plugin installed in those IDEs gives you the same fluidity and ease of thinking that touch typing does after you get comfortable with it. The key here is to get comfortable. It is easy to be intimidated with all the customization you can do with Vim, so my goal with this post is to be able to guide you through the first steps and take you to a place where you can find your own style with Vim.
Your First 2 Weeks
At this point, we are assuming that you already know touch typing. If that needs work, it would be a better investment of your time to get comfortable typing than learning Vim. You have to walk before you can run. I’m also assuming that you’ve tried to use Vim before but couldn’t manage to learn it efficiently. This piece adds little value if you already know the basics.
If you have zero experience with Vim, the first step is to try and use it outside your main IDE. If you have access to a Mac or a Linux terminal or any bash emulator on Windows (you can even install an Ubuntu Linux subsystem on Windows if you prefer that), type the following magical command on the terminal that is going to change your life forever: vimtutor.
This will bring up a tutorial that will help familiarize all the basic commands you could use with Vim. It will feel odd at first navigating with the hjkl keys, but within a couple of weeks, you will get familiar with the commands in Vim that you are going to use 90% of the time. And, yes, that includes how to exit Vim.
Testing the Waters
Every modern IDE or code editor has a Vim plugin. Go ahead and install it. If there is a bug on production that needs a quick fix, you can always disable the plugin, but it is important to get as much time as possible with Vim in your regular coding workflow.
You may not be super-efficient right away, so it is OK if you use non-vim shortcuts to get things done. If you are in the insert mode, the IDE basically behaves as if Vim is not enabled, but you want to keep in mind that most of the text editing in Vim happens in the normal mode. Usually, your progression will have the following steps.
Step 1: Text Navigation
The objective of this step is to avoid using the mouse as much as possible. Here’s a non-exhaustive list of what you can try to do:
- To go to a specific line or character, use the Vim navigation instead of clicking with the mouse. Try using the “w,” “b,” and “e” shortcuts along with hjkl.
- To set the workspace view, use zz, zt, or zb instead of scrolling with the mouse.
- Instead of using the IDE feature (usually Ctrl+f) to search, use the “/” shortcut.
- Use “0” to go to the beginning of the line, “$” for the end, and “^” for the first non-space character in the line.
- To go to a specific character in the current line, use “f” followed by the character. Use “F” to do the search backward. You can also use “t” or “T” the same way to go to the position just before the character you are searching for. F is short for “find” and T is short for “till.”
- To go to the next search in the same line, press “;” and “,” for previous depending on whether you searched forward or backward.
- To search the current word under the cursor, use “*.”
- Instead of Home and End keys to go to the beginning or end of the document, use “gg” and “G,” respectively. “g” is short for “Goto.” More on this later.
- Instead of page up and page down, get comfortable using Ctrl+d and Ctrl+u.
That might sound like too much to remember, but if you practice it for a couple of days, it will feel natural within a week. From here, we can augment it with text editing in the next step.
Step 2: Insertions, Updates, Deletions
Up until this point, we were just using the Vim cursor movement shortcuts. Now it is time to upgrade to making text edits in the normal mode instead of the insert mode. Editing does involve a bit of insert mode at times. For example, you would perform a text delete followed by an append or insert. Here are the things you can try:
- ciw means “change in word.” Use this to edit the current word.
- dw and cw mean “delete word” and “change word,” respectively. “w” is just for example. Depending on your style, you may do de/ce or db/cb. It is all about finding what feels good.
- Single-character edits with “x” and “r.”
- Get comfortable with the different ways to enter insert mode — “o” or “O” to insert below or over the current line, “a” to append after cursor, and “A” to append after the current line.
- Replace the cut/copy/paste workflow that you may be used to with your old text editor with d/y/p. That is “delete,” “yank,” and “paste.” “yy” yanks a line, “p” pastes text after the cursor, and “P” pastes text before the cursor.
- Undo with “u” and redo with Ctrl+r.
- You could also try some neat tricks like changing a word to uppercase with gUiw or similarly changing to lowercase with guiw. Remember that “g” stands for “goto.”
Step 3: Window Navigation
At this point, you are already ready to rock with Vim and you would be 90% more productive with your code. But this is just scratching the surface, so let’s explore some more useful tips that you can leverage with the Vim plugin in your main IDE before you consider switching to standalone Vim.
When you think about tabs in a text editor, they are not very different from, say, tabs in a browser. But in the Vim world, a tab is not really a tab. There are three concepts to be aware of:
- Buffer — The Vim buffer is the equivalent of a tab in your regular text editor. It is a virtual space representing a file being edited.
- Window — The best way to think about a window is to consider it as a layout. A window can contain multiple buffers, which are like different viewports in a layout.
- Tab — A tab in Vim is like a collection of windows or rather a workspace.
But IDEs with Vim plugins usually can’t support all these levels. However, you can use the Vim shortcuts in your IDE to split frames (vertically or horizontally) and switch between them. This is triggered in the normal mode with Ctrl+w followed by a window action. Here are some examples:
- Ctrl+w followed by “s” splits the window horizontally.
- Ctrl+w followed by “v” splits the window vertically.
- Ctrl+w and any of the navigation keys (hjkl) can be used to move between the windows.
Some IDEs have limited support for these types of operations and your mileage could vary. You could also navigate to definitions and back using Ctrl+] and Ctrl+t. At times, you may want to just use the IDE defaults, and that is OK too. It is all about getting comfortable and not forcing too much too soon.
Step 4: Tweaking Shortcuts
Using vimtutor, we learned to use “:w,” “:wq,” “:!,” and all the colon commands, as I like to call them. But as you keep using them for a few months, it might feel like you prefer changing the existing commands. Even perhaps the Escape key is too far to reach and you tend to use it frequently.
In a standalone Vim, you could configure your preferences using a .vimrc file in the user home directory. Some IDE plugins allow you to use the vimrc, and in some others like VSCode, you might have to set these shortcuts in a different way.
The important thing here is to not get carried away with customization and try to keep it as minimal as possible. Usually, a simple tweak goes a long way. Some of the features you could try and tweak are:
- Setting relative line numbers. This is probably one of the best numbering conventions as far as Vim is concerned. So if you find a line you want to go to numbered 5, you can just use “5j” to go down five lines instead of pressing “j” five times.
- You may also want to set the relative number mixed with absolute numbering. This will set line 0 of the relative numbering with the line number of the actual file.
- If not already enabled, you can use text highlight on search as a visual aid.
- Remap the save keys, escape keys, set a leader key, create shortcuts—anything you want to do.
Step 5: Macros and Visual Mode
Macros are really one of the most powerful features of Vim (as if it isn’t powerful without it). When Sublime Text and other editors came up with multi-line edits, I thought it was pretty cool. Macros are like that, but much more versatile.
A macro is basically a recording of your actions. Every recording is associated with a letter, so several macros can be recorded and reused in a session. To record a macro, type “q” in normal mode followed by any alphabet. We can do anything in normal or insert mode after this point and the actions get recorded until we press “q” again in normal mode.
To apply the macro, use “@” followed by the alphabet associated with the macro. For example, if you recorded using “a,” the macro can be run by typing “@” and “a.” And this can be combined with the number of times. Typing “5@a” will perform the macro five times.
The trick for multi-line edits is to go to the next (or previous) line just before stopping the recording. This way, when you apply the macro five times, it will execute the recorded action on five lines. There are a lot of ways to be creative with this.
Visual mode is another great feature that helps to format multiple groups of text at once while showing exactly what is being modified. Use “v” in normal mode to enter visual mode. From here, text can be highlighted with direction keys just like you would navigate in normal mode. And at the end, you can perform any action, such as yank or delete. I usually find myself using visual mode to convert caps. This is done by highlighting text and then typing “U” or “u,” which means “go to uppercase” or “go to lowercase,” respectively.
Step 6: Finding Your Style
This is the stage where you have an established method of editing with Vim. At this point, you may consider turning Vim into an IDE and really get to work on customizing it to suit your tastes. In order to do that, you would need to configure plugins. Many experts recommend using Neovim instead of standard Vim because of its rich support for plugins. Personally, I like to keep things simple and leverage existing features. Vim offers plenty of features out of the box, including a file browser (netrw) and fuzzy file finder that you can customize.
If you have time to kill, you could read the main page on Vim to discover hidden gems. But if you are like me just looking for a quick config, there are plenty of conference recordings on YouTube that can give you solid direction. I hope you have fun exploring Vim. Happy coding!
