Vim can be a polarizing editor, and while it may seem cryptic when you start, it can be incredibly powerful. Many folks never bother to learn vim, which is a shame. Some people go crazy with vim and make it their primary editor. For me, the sweet spot is somewhere in the middle — using another editor with some vim sprinkles. If you're not familiar with vim, and you're looking to level up your ninja editing capabilities, this is the article for you.
You don't need to master vim to integrate it into your workflow — I certainly haven't! Learning vim has a ton of benefits, but the best one (in my opinion) is that it makes you more efficient at navigating code. Not just code on your computer either, on pretty much any server. You'll be able to navigate with ease, but it doesn't stop there. Making changes while navigating is just one small step beyond that. As a bonus, think of how cool you'll look when your aunt Sally asks you to fix something on the server at her mustang repair business. You'll open vim, and Aunt Sally will forever be amazed.
Most editors have some form of "vim mode" support, whether built-in or an extension. In VS Code, I prefer to use amVim, since the other vim extension does weird stuff and messes with multi-cursor support. Before we get to the practical vim stuff, there are a couple of things I should mention...
Vim 101
Unlike other text editors, vim has several modes — most notably Command and Insert. This is a key concept, so commit it to memory. Perhaps you already knew, but I wanted to mention it for folks who weren't familiar. Command mode is where the navigational magic happens. You can move around the code, save the file, and tons of other stuff. Insert mode behaves like most other editors, you can type text, delete stuff, and it's the mode most people get stuck in when they first try vim. This is where the Escape key comes in.
Rebinding Your Escape Key
When you use vim, you're going to use the escape key a lot. It's how you switch from Insert mode back to Command mode. This is such a common task that I recommend rebinding your Escape key to a more convenient location. Some folks choose to remap it (in the context of vim) to jj, but I'd suggest a more efficient location with a system-wide binding. Instead of CapsLock, change it to Escape. If you want to go even further, make it a "mod-tap" key, so that when you hold it down, it becomes Ctrl, but when you only tap, it becomes Escape. This can be accomplished with software like Karabiner-Elements on mac. I know it seems odd... but try it.
Philosophy on Learning
It's not shocking that people have a tough time learning vim. It's cryptic, seems hard, and all the little commands take a while to make sense! However, it becomes magical and totally awesome once things start clicking. The real power of vim isn't in the individual commands. It's when you start combining them. Let's go over an example!
To better understand, we first need to consider the meaning of three characters — c stands for change, i stands for in, and t stands for tag. Note that these keys may not always stand for those things — but we'll get into that later.
So imagine you want to change the contents of a pair of HTML tags. If your cursor is on the open or close tag, you type cit and bam, like magic, all the content from inside the tags is gone, and you're ready to insert new stuff. Change in tag, remember? After you start using this command, doing this task with your mouse will have you feeling like a caveman. **Check it out 👇
This is just one example, but it's one I use all the time. It also shows how learning even a little bit of vim can pay huge dividends for your productivity as a developer. Here's a pro tip to learn vim even faster:
Instead of trying to remember each command, think of what you want to do. Then abbreviate.
You can probably guess half the commands in vim this way. For example, if you want to move forward in command mode by a word, it's just w. If your cursor is at the start of a word and you want to delete it — can you guess the command? It's dw, delete word. Keep this tip in mind as you use the editor more. Thinking about it this way was when the dots really started to connect for me.
Cursor Navigation
While in Command mode, the first thing you need to know is how to move the cursor around. While you can use the arrow keys, there's a better way. You can use h, j, k, and l instead. Since these are on the home row, it means less hand movement, and more efficiency when navigating your source code. Think of it like this:
Moving in Chunks
There's another concept that allows you to move around even faster. There are several types of blocks in vim, and moving by Word is one of the most useful. Use the following shortcuts for words:
w - jump forwards to the next word
b - jump backwards to the previous word
e - jump forwards to the end of a word
Start and End
The following commands allow you to navigate documents and lines quickly. Great little shortcuts. I've added my thoughts about how I remember some of them in italics.
gg - jump to the beginning of the document *("good game, time to restart")*
G - jump to the end of the document
0 - jump to the start of a line (I think of this as "ground zero")
$ - jump to the end of a line
Editing Stuff
Now that you're moving around the document with the speed of the Flash, let's take it one step further and learn how to combine those commands with editing and changing text. Again, all these examples start in Command mode.
Inserting
When you're in Command mode, there are several ways to change into insert mode.
i - Insert at the current cursor position
a - Insert one character after the current cursor position (append)
A - Append at the end of the line
o - Insert text on the line below (this one is great!)
O - Insert text on the line above
Real vim pros might use other insert commands, but I don't, so they got left out. Deal with it.
Operators
When these little operators are combined with the cursor navigation stuff above, they are some of the best timesavers! These are the only ones you really need to remember:
c - change
d - delete
y - yank (aka copy)
p - paste
. - repeat previous action (totally amazing, if you remember to use it)
Practical Examples
There's a lot more to vim, so I suggest you keep a good cheat sheet handy. For now, let's move on to a few practical examples of vim key combos.
Change in Word - ciw
It doesn't matter where your cursor is in the word. This will change it all!
Change in Quote - ci"
The ci series works for more than just regular text objects!
Duplicate a Line - yyp
Once you've yanked a line, you can paste it by pressing p multiple times.
Delete Until - dt
Like the change commands, you can use this with any character! In this example, I used a quote.
Swap Two Lines - ddp
A really quick way to cut and paste. Pretty darn useful!
This is just scratching the surface. I didn't even talk about selecting stuff in visual mode (there's more than just command and insert). This should be more than enough to get you using the vim mode in your editor. What are you waiting for?
Are you already a vim ninja? Send me your favorite vim key combos, and I'll add them to this article. Reach out @austencam on Twitter. Thanks in advance, and thank you for reading!