Getting Started with Vim: An Interactive Guide

Command line editors can be a scary thing to learn and use for beginners, and Vim is probably the scariest of them all - but it doesn't have to be. There's a lot to cover in Vim (more than one tutorial can possibly teach), but we'll cover most of the basics here so that you'll be at least comfortable editing files with it.

We're going to break this tutorial into two sections. A super basic starter to get you up and running and then more detailed sections below with a better explanation

Here's a blank canvas of what editing with Vim is like in our interactive tutorial. All examples will be JavaScript files. Try it out:

Introduction

Command line editors are exactly what they sound like, they give you the ability to edit files from the command line. There's a whole bunch of them, too:

Pico

Nano

Emacs

Vi

Vim

Neovim

Nano (which is basically a clone of Pico) is probably the most common one. It's just a dead simple editor and most people can usually figure out how to use it by just opening it up. Vim on the other hand requires training. Vim is a clone of Vi but improved (Vi IMproved). It has all the functionality of Vi and more - things like extra features, plugins, and more.

Vim is also extremely extensible. You can use it as your primary editor or just as a simple editor for changing files when SSH'd into a server (usually what I just do). The goal of this tutorial is going to be to get you comfortable enough to make edits on a server with Vim. At the end of this tutorial you'll be able to make edits to config files, use Vim to manage your Git merges and conflicts, and more. How much you want to use it is up to you.

If you're able to confidently use a vanilla install of Vim, you can effectively make edits on any server or OS worry free. Need to change an Nginx or Apache setting? No need to mount or do some FTP/SFTP stuff. Simply SSH into the box and make it happen from the command line in seconds.

Learning Vim is an investment. As you learn it, you'll only get better with it and find more and more things to improve your productivity. Very good people with it will claim it's like an extension of your fingers allowing you to edit files faster and smarter than you can even with an editor as awesome as Sublime Text.

Installing Vim

Vim works in almost any OS environment - including Windows. You can expect to be able to use it on virtually any machine or system that you're working with.

Macs

If you're using a Mac, VIM is already installed. It's an older version (~1.7), but it really doesn't matter for this tutorial. If you want to upgrade VIM on mac first, follow these steps (requires homebrew) in your terminal:

Linux

Test Your Install

Now that you have installed (or updated) Vim, it's time to test to see if it worked. From the command line in your terminal, type:

vim -v

That's it! Now to exit this screen, just type:

:q!

Super Basic Starter

Before we go into detail, let's do a super basic starter example to get things rolling.

From the terminal, navigate to a file and let's edit it with Vim:

vim whatever.txt

Alternatively, you can create a brand new file with the same command: vim mynewfile.txt.

Now that you're using Vim, we need to explain the two modes that Vim has: Command Mode and Insert Mode. Command Mode, just like it sounds, is for executing commands. Things like custom Vim commands (we'll cover later), saving files, etc. Insert Mode, also just like it sounds, is for editing text freely.

To enter Insert Mode simply type:

i

Now type any nonsense you'd like. Once you're done, let's save the file. You need to first exit Insert Mode and enter Command Mode by hitting ESC.

Once you're back into command mode, you'll need to save the file (called a Write) and then quit Vim. To enter a command, you need to hit the semicolon key :. Here's the command to save the edits (write, quit).

:wq

That's it! Alternatively, if you want to quit Vim without saving changes, just type:

:q!

The exclamation mark means discard changes. So this literally will translate to "quit and discard changes" for Vim.

That's all there is to the basic starter. If you want, you can either follow along in your own terminal or use our interactive editors below for the more detailed tutorial.

Learn to Speak Vim's Language

Vim is always just listening for instructions from you. It's up to you to give it commands. You need to tell the editor what to do. Vim follows a system for the syntax and pattern of these commands. Once you learn the "language" of Vim, all you need to do is keep learning more commands - Vim's "vocabulary".

There's no way to cover all the commands, but we'll get you started with the most common ones and how to start using them. In time, you'll learn more and more of these. Eventually, just when you think you've become a Vim expert, BOOM, you'll learn a new command and trick to save you time.

Vim also comes with its own tutorial. If you need to freshen up on your skills, you can simply type this from the command line to bring it up:

vimtutor

Moving the Cursor

From the earlier example, you were probably using the arrow keys to navigate around. That's perfectly okay, but it's recommended that you navigate a different way and actually not with the arrow keys. This way may be unnatural or weird at first, but it's recommended to use these keys instead:

h - Left

k - Up

l - Right

j - Down

Here's a visual for reference:

^
k
< h l >
j
v

Simply try navigating around with these keys below to get the hang of it. It will get easier in time. You can hold any of these keys to quickly make the action repeat:

Exiting Vim

The first time I encountered Vim I had no idea what it was. A server had it pop-open on me with a git pull and I couldn't even figure out how to exit until a friend helped me out.

To quit, enter Command Mode with ESC, then just type:

:q

To quit and discard changes, type:

:q!

To quit and save changes, type:

:wq

Text Editing - Deletion

It's one thing to delete text from Insert Mode, but you can also delete text from Command Mode. In the example below, click the editor and hit ESC to enter Command Mode. Next, navigate to any letter you want to delete and hit:

You're probably wondering why you just won't enter Insert Mode to delete characters. You can always do that, but you'll see from future examples that deleting text from Command Mode is more powerful and much quicker. It's better to start the habit now.

Text Editing - Insertion

Text editing simply requires you that you enter Insert Mode. We already covered how to do that, but there's some other methods to do this that can help speed things up and save you some keystrokes.

Operators and Motions, Counts, and Combining Them

Commands are where the true power and efficiency come from Vim. It takes time to start using them, but they all follow a similar pattern. It's a good idea to learn how commands work, not memorize commands. Commands are broken down into these parts:

Operator

Numbers

Motions

When to put together, the Vim Command will look something like this:

[OPERATOR][NUMBER][MOTION]

Operators

Operators are actions. These are like verbs of a sentence when "speaking Vim".

Here's a list of common operators:

d - Delete (acts like a "cut" command though)

c - Change

y - Yank

p - Insert last deleted text after cursor (put command)

r - Replace

Motions

Motions provide context to your Operators. These execute the action in a particular way.

Here's a list of common motions:

w - Until the start of the next word, EXCLUDING its first character.

e - To the end of the current word, INCLUDING the last character.

$ - To the end of the line, INCLUDING the last character.

And some additional others:

w - Forward by word

b - Backward by word

) - Beginning of next sentence

( - Beginning of current sentence

} - Beginning of next paragraph

{ - Beginning of current paragraph

] - Beggining of next sect

[ - Begginning of current section

H - Top line of screen

L - Last line of screen

Counts

Counts are optional and simply let you put a multiplier to your command and motion. You'll see how these work in the examples below.

In time you'll learn more and more of these and get quicker and quicker. It's usually handy to have a solid Vim Cheat Sheet on hand when getting started.

Let's go over some examples to demo how these work to together. Once you recognize that it's a pattern and language, you can start figuring out and testing these all on your own.

Deleting a Word

Navigate to beginning of the word in the editor below and enter this command. If you're in the middle it will stop at where the word ends:

Search and Replace

Searching and jumping around the page is one thing, but maybe you want to change all words of cat to the word dog. This is really easy with Vim.

Find and Replace

:s/cat/dog

Find and Replace All

To replace all instances, you need to make the find and replace global. Here's how:

:s/cat/dog/g

This can get infinitely more complex. You can do regular expression find and replaces, replace only on certain lines, sections, and more.

Execute an External Command

This creeps right out of the area of getting started with Vim to the intermediate parts of it. With Vim, the commands aren't just limited to the Vim syntax/language of operators and motions.

You can execute external commands as you normally would from the command line inside of the editor. All you need to do is start the command with an exclamation mark.

Here's an example to list all files:

:!ls -al

As you learn more about Vim, you'll see how insanely powerful this will be. You can do things like write to other files, grab code from other files, paste into other files, and more. In a sense, it like your own little Sublime Sidebar on steroids. We won't cover any of this in this tutorial, but here's a good resource for learning more about external commands with Vim.

Configuring Vim

Vim can also do things like syntax highlighting. By default, this usually isn't enabled. To enable it on a file, simply enter the following command:

:syntax on

This is quite annoying to have to reenter on each file. This is where configuring Vim comes in handy. All Vim installs come with a file in your home directory called .vimrc. If it's not there, create one.

So, from the command line and with vim, let's force enable :syntax on to be a default setting. The first step is to open the file in Vim:

vim ~/.vimrc

Then simply add this line to the file:

syntax on

Finally, save the file to have syntax on by default in Vim:

:wq

There's a ton of these features. Things like showing a ruler, always showing the line number, themes and color schemes, and much more. You can even create short codes and functions to operate from.

Conclusion

That's all there is to getting started with Vim. Just like anything else in the development world, you get better at it by just doing it. Hopefully by now, you're ready to start editing files with Vim.

Finally, there's a ton of awesome content on the web for Vim resources and learning beyond this article. I definitely encourage you to check them out: