Setting up vim for web development

Every developer has their favorite text editor. If you prefer vim, and want to set it up for web development, this short guide can help get you started. I’ve only included plugins I’ve found useful for HTML/CSS/JavaScript  to keep this guide relevant to the majority of web developers.

I’ll start with basic vimrc settings. These are pretty standard settings for vim users, and generally make using vim easier or faster.

If you already have your own vimrc set up, feel free to ignore this section.

Vundle

There are a few different package managers for vim. I’ve found Vundle to be the most intuitive to use and easiest to set up. Installation is very straight-forward, and it makes managing additional plugins dead simple. Just follow the installation instructions on the github page, and then you’re set to install all the other plugins in this post.

CtrlP

CtrlP is a file/buffer/mru/tag finder for vim. It uses fuzzy searching, and its accuracy is impressive. After trying NerdTree, Command-T, and the built-in vim explorer mode, I’ve found CtrlP to be the fastest of the four. Installation is simple with Vundle, just add this line to your vimrc :

CtrlP has a few different modes. The ones that you’ll probably use most are the standard file mode and the buffer mode. I’ve added a couple mappings to my vimrc to minimize the keystrokes required to get to these modes.

With these mappings, leader-p will start CtrlP, and leader-n will start CtrlP in buffer mode.

Sparkup

Sparkup is a plugin that minimizes the amount of HTML you have to type, by using zen coding abbreviations. An example will show how much typing this can save you if you work with HTML a lot. Let’s say you’re using bootstrap, and want to create a layout with a row and a couple columns, in a container. Here’s how you could do that with sparkup.

That snippet will expand into this with a single keystroke (or Ctrl-E by default) :

Sparkup also has templates, such as ‘html:5’ which expands into a basic HTML5 template. Not only does it minimize the amount of HTML you have to write, it also works for CSS. Installation is as easy as adding this to your vimrc :

NerdCommenter

NerdCommenter is a pretty simple plugin, and it does exactly what it’s name suggests : it comments (and uncomments) lines of code. With this plugin, you can select multiple lines of code via vim’s visual mode, and then press leader-c-leader, and the selected lines will be commented out, or uncommented. Add this to your vimrc to install it :

neocomplete

Neocomplete (short for neo-completion with cache) is an auto-completion engine which is essentially neo-completion, but with a cache of all keywords in the current document. I’ve tried using YouCompleteMe and SuperTab, and I’ve found neocomplete to be the best, and easiest to set up. Installation is the same as any other plugin with Vundle, just add this to your vimrc :

Unfortunately, neocomplete needs some more settings for it to work very well, and they’re shown on the github page, but for the sake of convenience I’ll put them here too :

Put all these settings in your vimrc to get the most benefit out of neocomplete.

Miscellaneous

Here are a few settings in vimrc which could be useful for web developers, but are by no means necessary.

When you press o or O to create a new line in vim, it’s very intelligent with where to put the cursor, almost always getting the indentation right. However, if you press esc then press i to insert again, the cursor is at the beginning of the line. There’s an easy solution to this, courtesy of StackOverflow user thedeeno. Simply put this in your vimrc, and insert will be as intelligent with indentation as o and O are. I’ve found this to be very helpful when editing HTML as well as JavaScript.

The leader key in vim is by default. There’s nothing wrong with keeping it like that, but I find that it’s easier for me to hit spacebar with one of my thumbs than it is to stretch my pinky to the backslash button. To remap the leader key to space, put this in your vimrc :

For those who find themselves writing a lot of CSS and like to keep their statements sorted, insert this into your vimrc :

Now, just press leader-s, and all statements within curly braces will be sorted. If you want to sort the whole file, type :SortFile.

Conclusion

These are only the plugins and settings which I have found to be the most useful. If anyone has any suggestions for additions to the list, drop a comment below and I’ll check it out.

One thought on “Setting up vim for web development

Leave a Reply

Your email address will not be published. Required fields are marked *