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:

function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

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:


brew install mercurial
sudo mkdir -p /opt/local/bin
cd ~
hg clone https://code.google.com/p/vim/
cd vim
./configure --prefix=/opt/local
make
sudo make install
echo 'PATH=/opt/local/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile

After you do this, you should have VIM version (7.x) on your machine.

Windows

For Windows users visit the Official Vim website to download.

Linux

Vim ships as a package for *nix systems.

For Ubuntu, just run this from your terminal:


sudo apt-get install vim

For CentOS, just run:


sudo yum install vim

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

Vim Startup Screen

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

Insert mode with Vim

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

Saving a file with Vim

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

Vimtutor Screenshot

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:

function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

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:


x

Try it below:

function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

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.

Inserting

This puts the cursor before the current position.


i

Appending

This puts the cursor after the current position.


a

Open Commands

This puts the cursor below the line:


o

And this puts the cursor above the line:


O

Try each these below to see the differences in action:

function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

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:


dw
function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

Deleting to End of a Line

This will delete everything until the end of the line. Move your cursor to the beginning of a line and enter this command:


d$

Now, here’s an example of a count. This will run the command twice and deleting two lines after the cursor position.


d2$
function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

Deleting a line is a super common task. Vim has a shortcut built in for this. For example, to quickly delete a line you can always just do dd instead.

Deleting Four Words

Here’s a command for deleting four words:


d4w
function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

The Undo Command

With all these commands, there’s a good chance you might mess up once or twice. This is totally normal and okay. You can quickly undo a command with:


u

Try undoing some commands in the editor below to see how easy it is:

function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

Quick Page Navigation

Scrolling doesn’t really exist in a terminal. So if you have a long file that you’re editing, it might get real boring navigating with the arrow keys or h, k, l, j. Here’s some tips for this:

Move to the bottom of a file


:G

Move to the start of a file


:gg

Navigate to a specific line

You can view your current page line with:


:ctrl+g

You can jump to a specific line with:


:123+G

Searching

You’re probably used to doing ctrl-f to jump around a page. Vim is actually really similar to this – except it’s a command. You’re probably learning by now that everything is a command action.

Search a page after the cursor position


:/cats

Search a page before the cursor position


:?dogs

Go to next or previous match

To navigate to the next search match, enter:


n

To navigate to the previous search match, enter:


N

Try it out:

function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

Matching Search

By this point, you can jump around the page and search things, but it’s still slow to locate various things in a file. In Vim, you can jump around based on opening and closing matching brackets.

For example, say you have:


function hippopotamus() {
    // insert 1 million lines of code here
}

If you go navigate to { and hit the following key, you’ll jump to it’s matching counter part.


%

This is insanely useful for quickly jumping around functions. This works on the following:

  • ( and )
  • [ and ]
  • { and }

Try it in the example below, it’s awesome:

function meow() {
return ‘meow’;
}

function bark() {
return ‘woof’;
}

function getRandomAnimal() {

var animals = [
‘cat’,
‘dog’,
‘hippo’,
‘lion’,
‘bear’,
‘zebra’
];

return animals[Math.floor(Math.random()*animals.length)];
}

console.log(meow());
console.log(bark());
console.log(getRandomAnimal());

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.

A good reference for this is The Ultimate Vim Configuration for .vimrc. You can either copy this or pick and choose all the goodies you want from it.

Useful Tips and Tricks

You should now be comfortable with Vim on the command line. Here’s some miscellaneous useful tips and tricks.

Set Vim as your default command line editor

Nano is usually a default command line editor in a lot of systems. On Ubuntu or other Debian-based systems, run this command to make the switch:


sudo update-alternatives --config editor

Set Vim as your default editor for Git


git config --global core.editor "vim"

Plugins

Vim also has the ability to allow third-parties to write plugins into the editor. This is awesome because you can use all this pre-built additional functionality by others.

For example, NERD Tree will essentially simulate a sidebar for your editor.

NERD Tree Screenshot for Wim

To learn more about plugins, check out these additional resources:

Neovim

Appararently building a plugins on Vim is pretty difficult to do though. Neovim is a rebuild of Vim to hopefully making adding plugins easier. You can check out their official website to learn more.

On Ubuntu, you can install Neovim by doing:


sudo add-apt-repository ppa:neovim-ppa/unstable
sudo apt-get update
sudo apt-get install neovim

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: