Hard to Learn but Way More Fun: Why You Should Try Vim

"I’ve been using Vim for 5 years. Mainly because I don’t know how to exit it."

If you were to ask people about their experience of Vim, this is what their answer would look like — a joke about quitting the program and a sigh of relief when Nano is present on the system.

Besides the fact that Nano is at least equally weird to exit to me, Vim’s esoteric reputation is so widespread that the public mostly stays away from it, largely unaware of its potential.

Programmers, in particular, are missing out.

I am not advocating for the use of Vim as a full-fledged IDE here. I am talking about bringing Vim to your favorite code editor as an extra layer for which there’s probably an extension already.

VSCode, Sublime Text, PHPStorm, and Atom all have Vim integrations, for instance. If you use a different program, open its extension manager now and search for “Vim” — I’m sure you’ll get some results.

The point is that you don’t have to learn a new editor from scratch — you can keep your favorite software and sprinkle it with some Vim magic.

Vim doesn’t have to replace the way you interact with text entirely, either. In most cases, developers will incorporate Vim commands into their coding practice progressively, alongside native ones.

They will have the option to keep what they like and leave out the rest.

TL;DR

Vim doesn’t have to be an obscure, elitist text editor;
It’s got plenty of features that can speed up your coding;
Most modern IDEs and code editors have decent Vim integrations;
This post intends to show you the ropes and convince you to give it a try.

Vim or Vi?

Let me start with a little bit of disambiguation. You may have come across
both Vim and Vi on your developer journey and be unsure as to what the
difference is.

Simply put, Vi is a standard, and Vim an implementation of that standard.

In fact, Vim is the standard’s most popular implementation, coming with most Linux distributions.

This is also why the vast majority of IDE extensions will refer to Vim instead of Vi.

Normal mode vs. insert mode

This is usually the first thing that trips up new Vim users — the fact that the insert mode is not the default mode. They will place the cursor where they want to make changes, start to type some text, and then…

Nothing.

Worse yet, they accidentally trigger a Vim command that makes the text behave seemingly randomly, producing weird outcomes which they promptly try to revert. When they make things worse instead, they attempt to prevent further damage by closing the program but can’t seem to find a way out, wondering how the hell they ended up trapped in this vicious escape game.

The most tenacious individuals will eventually figure out that they can make changes by pressing

, and then save their work and get out of there unharmed by pressing the escape key, followed by

:wq

The vast majority of people won’t push their exploration further, confident
that this is all the knowledge they need. And as far as quickly editing a file on a server goes, they’re not wrong.

But Vim can be used for much more than this. To get to that conclusion, though, we need to explore some of its many features, starting with the different ways at our disposal to enter the insert mode.

Here’s the first one, which we’ve mentioned already: pressing

(for insert) will allow the user to makes changes at the current position:

To be more specific, it will place the cursor before the current character. If you wanted to place the cursor after instead, you’d go for

(for append):

You can also insert some text at the very beginning of a line with

(capital i):

Or at the end of a line with

(capital a):

You can also create a new line below the current one by pressing

(for open, although that one feels a bit like a stretch, but whatever):

And if you want to add a line above instead, that’s

(capital o):

That’s it for the basics of entering the insert mode. As mentioned earlier, press the escape key to return to the normal mode.

While you may not be super impressed yet, in the long run, the repeated use of these shortcuts can make for an improved user experience already.

That said, most of them are only useful once the cursor is already close to
where you want to make changes, which is not necessarily the case when
you’ve just opened the file.

Thankfully, Vim has a few ways to get us where we need to be — fast.

Moving around

Vim is first and foremost the art of moving around without using the mouse.

That doesn’t mean you shouldn’t use the mouse — I use it all the time.

That means you can not use the mouse if you don’t want to.

Now, if you’ve been doing this for a while, you’ve probably figured out a
few ways besides the arrow keys to move around the code, like shifting
the cursor’s position word by word instead of character by character or
getting quickly to the beginning or the end of a line, or that of an entire file.

Let’s see how we can do the same with Vim.

The first thing to remember is that you need to be in normal mode to use the following commands.

Next, you might have heard that you’re supposed to use the

, and

keys to move left, up, down, and right, respectively. I don't. In practice, I find these shortcuts extremely inconvenient, so I just use the arrow keys instead. No hard feelings.

With that out of the way, here is how you can move the cursor word by word using Vim — by pressing

(for word):

Note that it will get you to the beginning of the following word. If you wish to get to the end instead, press

(for end):

To go backward, press

To go to the very beginning of the line (the hard beginning), press

To go to the end, press

(which appears as the shift key followed by the number 4 on the gif — sorry about that):

To get to the top of a file, press

gg

And to the last line, press

(capital g):

That should cover what you can normally do with a regular editor — let’s now see how we can take things further with Vim.

I demonstrated earlier how to go to the hard beginning of a line (with

), which implies the existence of a soft beginning.

The soft beginning is the first non-blank character of a line, which you can get by pressing

(which appears as the shift key followed by the number 6 on the gif):

The

and

characters are likely familiar — they usually mark the beginning and end of a regular expression.

It is also possible to go to a specific line number, which is useful to find where an exception was thrown, for instance. This is achieved by pressing

#G

, where

is the line number:

Another couple of Vim shortcuts I use all the time are

and

. The former stands for find and allows us to place the cursor on the first matching character:

(for till) does the same thing but places the cursor before the first matching character instead:

They also have their backward counterparts —

(capital f) and

(capital t) — which I invite you to try by yourself.

There are many other available shortcuts, but these will do for this article.
What I’d like to draw your attention to now is the fact that most of these commands can be combined with a number, the same way we associated

with a number to get to a specific line earlier.

You can, for instance, skip four words by typing

4e

(remember that

gets you to the end of a word):

This also works for moving the cursor to the nth matching character. You could, for instance, type

3F

, to move back to the third comma:

Try this with some of the other shortcuts — it’s pretty cool.

This is just a glimpse of the way Vim allows us to combine different commands to achieve specific outcomes. Some might look hard to pick up at first, but with a little bit of practice, they all come naturally.

Knowing how to move around with Vim is extremely important because it is the key to performing complex edits.

But this is also useful for more common operations — let’s see how.

Copying, cutting, and pasting

When it comes to copying and cutting, Vim has its own clipboard, separate from the operating system’s. It’s called the unnamed register and allows for some advanced operations that I won’t get into here (mostly because I don’t know how to use them myself).

In other words, if you copy a value the regular way (with

cmd+c

on a Mac, for instance) and then copy another value using the Vim command, the latter doesn't overwrite the former — they're stored in different places.

So how do we copy stuff?

First, make sure you’re in normal mode. Then, select the bit of text you’re interested in. Finally, press

to copy the text into the register. That's it.

The

command stands for yanking. Now I don't know why they called it that, but I find it kind of funny.

Anyway, once you’ve done that, place the cursor where you want to paste the text and press

That will paste the text after the cursor. If you’d rather paste it before, use

(capital p):

To paste over some text instead, select it first and then press

How about cutting some text? Select the portion of interest, then press

(for delete):

That’s right; there’s no difference between cutting and deleting, so long as you don’t paste the corresponding text. If that’s what you want to do, though, the same shortcuts apply. For instance

Now the above is great but doesn’t bring anything new to the table. Then again, things get more interesting when we start combining commands.

I won’t always show examples for both yanking and deleting below — you can assume that what works for one also works for the other.

First, we can copy or delete/cut an entire line by pressing the corresponding key twice. E.g., to copy the entire line, press

yy

(and then

to paste below):

To paste above instead, press

(capital p — same as before):

How about copying or deleting multiple lines? Just squeeze a number in there — e.g., to delete two lines, type

d2d

Want to delete until a specific line number? That’s

d#G

, where

is the line number:

This is another way to use the

shortcut we've seen earlier, in conjunction with yet another command.

Now, remember the

and

commands to place the cursor at or before a specific character forward and backward? They work with copying and cutting, too.

Here, we copy up to and including the full stop and paste before the cursor with

But that’s not all. One of my favorite features is the ability to yank and delete some text inside boundaries.

Say we want to delete a section that’s between double-quotes. We can do so with

di"

(the double quotes appear as the shift key followed by a single quote on the gif):

In the above command,

is for inner.

This also works with parentheses, curly and square brackets, greater than and less than symbols — anything marking a beginning and an end.

It applies to words, too:

In the above example,

diw

stands for delete inner word.

You can also paste content inside boundaries (then again, the double quotes appear as the shift key followed by a single quote on the gif):

The trick here is to use Vim’s visual mode, which is different from the normal and insert modes (two other modes also exist — command and replace — but we’ll stick to those three in this article).

The visual mode is essentially a selection mode, which we briefly saw earlier when we covered yanking. To enter it, make sure you’re in normal mode and press

. From there, the same shortcuts used to move around the text also apply to selecting it.

In the example above, we’ve selected the text between double to paste some other text over it using the

vi"p

sequence, which roughly translates to visual inner double quotes and paste.

Note that whenever you select some text using the mouse instead of the keyboard while in normal mode, you automatically enter the visual mode.

Editing

There are several ways to go about editing, but in practice, I only use a single command which I combine with others.

Starting in normal mode, select a bunch of text and press

(for change):

This is basically a shortcut for

di

— delete and insert.

Like the other commands, it can be associated with different shortcuts to achieve various outcomes.

You can, for instance change the current word with

ciw

(for change inner word):

Or replace the next three words with

c3w

(for change 3 words):

Or until the next exclamation mark (which appears as the shift key followed by the number 1 on the gif):

In the above example

ct!

stands for change till exclamation mark.

You can also replace the entire line with

cc

Or change till the end of the line with

(capital c):

There is more to editing, but as the above covers 99% of what I use daily, I’ll leave it at that. Should you be interested, though, you’ll find more information in the resources listed at the end of this article.

Searching, saving, and exiting

As Vim is originally a text editor in its own right, it also has commands
for searching/replacing, saving, and — infamously — exiting.

But since the premise of this article is to use it within your editor of choice, you’re probably comfortable with the way those are handled already.

While nothing prevents you from using the Vim way instead, you wouldn’t miss out too much by sticking to what you already know. Then again, if you want to know more, the resources listed further down will help.

Undoing and redoing

While undoing and redoing are also standard IDE features, you might want to learn the Vim shortcuts for these because they don’t necessarily mean the same thing.

When you undo something in Vim, you revert everything you’ve done since the last time you were in normal mode. Conversely, when you redo something, you restore the changes until the point you switched back to normal mode.

Your code editor may not have the same notions of previous and next changes, which is why you should probably learn the Vim way for these.

Thankfully, it isn’t complicated at all.

You can undo some changes by pressing

Note that I pressed the escape key to return to normal mode first.

You can redo the changes by pressing

^r

(the control key followed by lower case r):

Another useful thing to know is that when you start typing a Vim sequence and realize you’ve got it wrong, pressing the escape key will cancel it.

Combining Vim shortcuts with native features

This is the last thing I wanted to broach today. In the introduction to this
article, I mentioned that developers would be able to use Vim features alongside native IDE ones. Here is an example of this, taken from my own
practice.

I really like VSCode’s way of handling multiple cursors, and while it’s possible to achieve a somewhat similar result with native Vim features, I use VSCode’s implementation all the time (

cmd+d

on a Mac):

What I often do is I copy a value in the regular clipboard, select the instances of a bit of text I want to replace using VSCode’s multi-cursor feature, then press c and paste the text the regular way (with

cmd+v

This is a weird combo that ultimately only uses a single Vim command (

), but one that works for me.

The point is that nothing forces you to embrace Vim fully. Try different approaches, see what works for you, and ignore the rest.

Conclusion

It may have occurred to you in light of this article that Vim is pretty much its own language.

You’ve got to learn some vocabulary first, then some grammar, and make sure you’ve got the syntax right. Eventually, you start forming whole sentences allowing you to achieve increasingly complex results in a way
that almost feels natural.

There’s undoubtedly a learning curve to Vim, but it’s a small price to pay to leverage its potential, in my opinion. Besides, this initial hurdle is further mitigated by its integration into popular code editors, allowing users to experiment within familiar surroundings.

Vim has many features to offer, and while this article is a collection of
rather basic examples, they can get you a long way already.

The resources listed in the next section will give you some pointers if you want to explore the topic further. I find this cheat sheet to be particularly helpful, for instance. In any case, Vim has been around for a long time and is used by many people; as a result, there’s a vast amount of readily accessible knowledge out there.

Resources

Vim.org
Vim Adventures
Learn Vim (the Smart Way)
Vim cheat sheet
Vi vs Vim
VSCode extension
Sublime Text extension
PHPStorm extension
Atom extension
You may have recognized some quotes from Breaking Bad
Gifs were made with Keycastr, QuickTime, FFmpeg, and Gifsicle (tutorial)

This story was originally published on tech.osteel.me.