Using Vim in modern WebDev

Posted on in vim, webdev

Vim is old, there’s no surprise there. It is though, one of the most used tools by developers all over the world. Why? You might ask. In this post I’ll try to elaborate on my reasons to use this editor and basically just let you know why I enjoy Vim more than any other editor out there.

Modal Editing

This is one of the biggest things that makes Vim is so different to many other editors out there. In most editors, you just fire up the editor and start typing, if you attempt to do that in Vim, you’ll cause the editor to go crazy! This makes first time Vim users panic, close the editor and never open it again. It happened to me once, I like to call it “The Vim initiation ritual”. This happens because by default Vim is not in Insert Mode, which is what all other editors default to, instead it’s in a mode called Normal Mode, which is mostly used to browse text.

Modal editing is smart because the majority of the time we spend working with our editor it’s not writing code, most of it is just reading and correcting lines of code. Using what’s known as Normal Mode you can easily navigate around text, whenever you want to make changes you simply change to Insert Mode by pressing “i”, type, and go back to normal mode by pressing “esc”. Normal Mode is a safe place where your text cannot be modified, you want to always be in normal mode and only swap modes when needed. There are more modes than just Normal and Insert Mode, there are for example a couple of selection modes where you can easily move text around.

Modal editing might not quite make sense if you just read it, but once you get used to it you wish you can use it in every other editor! And that’s probably why most of them have a “Vim Mode” plugin.

Efficiency

Vim is efficient. Proper Vim usage gives you an edge when editing text. Beeing a developer and caring about productivity, this might be one of the first features that catch your attention. When using Vim you don’t need to move your hands out of the keyboard, because using a mouse is completely optional and actually discouraged. Everything you can do in Vim you can do it with just key strokes combinations, which actually make sense once you get used to them.

If you’ve never used Vim before you might think “Yeah sure, but you have to memorize 100 hotkeys to be productive”. While this has some kind of thuth, hotkeys in Vim are intuitive, thus you only need to learn the basics and how to compose them, and eventually you learn to just “talk in Vim” instead of typing memorized combinations. Let’s see an example:

In Vim, you can find the next appearance of a letter by pressing f[letter] (f for find), and the previous by pressing F[letter]. You can also press * to find all matches of the word where the cursor is currently at, then by pressing n (n for next) you go to the next match, and pressing N will take you to the previous one; o will insert a new line under the cursor, O will insert a new line above the cursor. Notice the pattern? Once you learn the basics, you can deduce the rest and not try to remember keys combinations, just speak in Vim.

Extensibility

Vim has a lot of plugins out there, you can find one for pretty much anything you need. Zencoding/Emmet? You got it, Coffeescript syntax? No problem, JS Linter? Easy! Most popular plugins and themes have a Vim alternative so you won’t feel like you’re missing out.

The only downside is that writing your own plugin can be a pain, as Vimscript — the language used to write plugins for Vim, is not exactly well documented or easy to use. This might change in the future, there’s something called NeoVim which is a Vim fork and aims to “modernize” our beloved editor. It’s far from finished yet, but one of the many things they want to improve is to enable the developers to use Lua to create plugins, making such task much easier.

Speed

Vim is small and powerful, beeing just a text editor makes it much faster than any IDE. Although this is not an “IDE vs Editor” post, I’d like to point out that for web development, an IDE might be an overkill, and there’s nothing you can’t do with a well configured editor and a tool like Grunt or Gulp. Vim was designed to work in very limited environments so most modern computers run it really smoothly.

Terminal Usage

This might not be relevant for many of you, but beeing able to use Vim in the terminal is huge. Most servers have Vim installed, which you can use to quickly edit server configuration files, you can even import your personal Vim configuration file if you want to use that machine as a development machine and work though SSH with tmux + Vim, using Nitrous for example.

7x6f6hc8sbofaw

Downside

Of course, everything in life has a good side and a bad side, for Vim I feel it’s the learning curve. Getting started can be hard, and it takes time to get used to it and be able to configure and customize at will. That beeing said, don’t let it get you down! Nobody knows all of Vim, if you know enough to make you feel comfortable it’s good enough, also you can always learn new things here and there.

Resources

The first thing you can do is Vim Tutor, which is a 30 minutes tutorial that ships with Vim, if you are using UNIX you can simply run vimtutor to read it, on Windows you have to look for “Vim Tutor” in your start menu. This little tutorial will explain the very basics of vim and will help you know where you stand and where to go from there.

The thing I reccommend the most if you really want to learn Vim is Practical Vim, that book assumes no knowledge of Vim and will make you proficient with it really quickly. If you do decide to try the book out I reccommend take it slow, and try a chapter at a time, trying out the things you learn for a while before moving to the next one, you’ll be surprised how little chapters you need in order to start outperforming other editors!

A free alternative is A byte of Vim, but in my opinion is not nearly as good as Practical Vim — still a good starting point though, it’s not like the things you learn in this book wont be useful!

Learn Vimscript the hard way is a good and free resource which guides you though configuring Vim using Vimscript.

Starting with Vim can be difficult, but I can assure you it’s well worth. Good luck!