No Time Dad

A blog about web development written by a busy dad

Learn to Use Vim to Save Time

Intro

Learning the basics of Vim was one of the best things I’ve done in my career as far as development time savings goes. I do not use Vim as my full fledged editor (I prefer vscode), but I do use it daily for making quick edits or searching through files. I’ll even sometimes open a file in using Vim from the vscode cli if I need to make a quick edit. It just ends up being less keystrokes and thus less time spent making a small change.

The Basics

If you can learn these commands then you are well on your way to becoming more comfortable with Vim. 1) Opening (or creating) a file 2) Searching for text in a file 3) Modifying text in a file 4) Saving changes 5) Exiting Vim

Most of the time that I am using Vim I am using some combination of these commands. For anything more than this combination of commands I’ll drop into my regular editor to make the change. I think if you can master these commands you’ll see a big time savings in your workflow. The small time savings always add

The Example

Below are the steps we will be performing with an explanation below. 1) Open a file with vim package.json 2) Search for the text “test” in the file by typing /test then pressing ENTER on your keyboard. 3) Move between results by pressing n on your keyboard 4) Enter insert mode by pressing i on your keyboard 5) User your arrow keys to move to the first double quote and add echo 'no ci found' between the quotes 6) Save your work by pressing ESC and typing :w 7) Quit Vim by pressing ESC and typing :q

So, lets try a few commands. The first (and most important) is the vim command itself. You will almost always use it as vim <filename>. If the file exists then vim will open it. If the file does not exist then vim will create it in memory until you tell vim to save it.

For our small example today we are going to be working with a package.json file. You can create this file wherever you’d like using the cat command below. You could also of course create the file via vim package.json and paste in the contents, but for now we’ll just pretend it already exists.

cat <<'EOF' > package.json
{
  "name": "scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "test-ci": "",
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
EOF

When you open a file using Vim you are automatically placed into “command mode”, where Vim is basically waiting for instructions or commands to run. Another of Vim’s modes that we will use today is “insert mode”, which is the mode you use to modify the file contents. Open the file with vim package.json.

Now for our example our goal will be to add a new echo statement to the test-ci field in the scripts block. Our example file is small so you could just use your keyboard arrows to find the text and make the changes, but you’ll probably be working with larger files at some point so we’ll practice Vim’s search command.

Before we search for the text I want to mention an important thing about Vim. It is really easy to switch between modes and not notice which mode you are currently in before you type something. I think this leads to a lot of frustration for new Vim users. One trick I have found to combat this is try to remember to press ESC on the keyboard before I type a command. Pressing ESC puts you into Vim’s command mode where you can type your command, hopefully, without putting Vim into a strange state. So let’s go ahead and search for the string “text” in package.json

Start by pressing ESC on your keyboard and pressing the forward-slash /. The forward slash is the search command in Vim and it tells Vim that we want to search this file for the text directly after the forward-slash.

We will search for the text “text” in file. Press ESC first to double check that you are in command mode and type /test

Now press ENTER and you will be taken to the first instance of the text “test” in the file. In this example we want to modify the second instance of “test”, which is “test-ci”, so we’ll press the n key on our keyboard to tell Vim to move to the next. If we wanted to go back to the previous search result we could press N (SHIFT + n).

Now that we have found the line we want to modify we will enter “INSERT” mode, which lets us modify the file. Press i to enter insert mode. You can now use your right arrow key to move your cursor over to the first double-quote. After that first quote we’ll just add the text echo 'no ci found'.

Once that is done we can save our changes. Press ESC again to enter command mode. To enter a command in Vim we use the colon : character followed by the command. We want to “write” our changes to the file, so we’ll use w to tell Vim to save our work.

After pressing ESC to leave insert mode and enter command mode, we’ll type :w and press ENTER on the keyboard.

And now we have opened a file, searched for text, inserted text, and saved our changes. The last thing to do is quit Vim. We can quit Vim by pressing ESC again to make sure we’re in command mode and typing :q. This should take you back to your cli. You can also chain commands- :wq would save and quit Vim.

Conclusion

This might seem like a lot to just open a file and save some changes…and it is at first, but I’d encourage you to practice this a bit more and I think you’ll eventually see that it really can become a very fast way to modify files or to just search for things in a file. Lots of people use Vim as their primary editor. I am not there yet and probably won’t be, but I can definitely see the appeal. If you ever get the chance to watch an experienced Vim user work you’ll see how fast it is and how quickly they move through files and tasks.