Using Vim for web development

With all the fuss on Atom and Sublime Text, I decided to talk a bit about my favourite editor, Vim. I’ve tried both Sublime and Atom, I’ve especially used Sublime for quite some time before comitting to Vim, but ever since I’ve transitioned to Vim I just can’t go back to Sublime or any other non-vim editor.

This is not a post to convince you to use Vim though! Maybe I’ll make one of those one day, for now I’ll just assume you already use Vim and want to use it for web development.

I’m not a Vim veteran but I’ve been using it for quite some time now, and I think my .vimrc is stable enough to share it. Hopefully this article will help Vim developers out there to improve their workflow a bit, or maybe give Vim a try.

First thing first, my .vimrc can be found in this gist. It’s divided in 3 parts, the first being essentials and sanitization of defaults, then custom mappings/settings I like, and finally configuration for plugins/themes. Reading the .vimrc file will be enough to understand the first two sections, nevertheless I’ll highlight some of the features of each part.

The first section is General Usability and it tries to make a good base for general file editing, most important settings include using utf8 as the default encoding, unix line-endings, enable syntax highlighting and file type recognition. There are a lot of details in this section and I find it quite hard to remove anything, I find it to be a quite minimal and required configuration for modern text editing.

The next section is more personal, and I called it Customization, it has some personal shortcuts I like, for example Windows’ style copy-paste using <c-c> and <c-v>, saving with <c-s>, setting , as the leader key, indentation and such.

The final part is the Plugin Configuration, which I’ll explain in more detail below.

Vim Plugins For Web Development #

The final section of my .vimrc is plugin configuration. These plugins are my favorites right now for web development, and working without them can be quite a pain!

Vundle - https://github.com/gmarik/Vundle.vim #

The now recommended plugin manager for Vim. It works pretty well, and it’s really easy to add and remove plugins. I heard that NeoVim uses a somewhat similar system, so it’s good to have the potential to make a smooth transition.

NERDTree - https://github.com/scrooloose/nerdtree #

One of the most popular plugins out there, it makes a directory explorer you can navigate using your keyboard to easily access your project’s files. It also allows you to easily create, rename, copy and remove files. I find it quite hard to live without this!

FuzzyFinder - https://github.com/vim-scripts/FuzzyFinder #

Sometimes you want to get quick access to a buffer or a file, for this I use this plugin, with <leader-b> and <leader-f> I can bring a dialog where I can quickly open a buffer that was on the background or open a new file faster than using NERDTree. I use it a lot for buffer swapping.

Lightline - https://github.com/itchyny/lightline.vim #

A pretty status bar for Vim, it has lots of nice information on the current file, no reason no to use this really!

EasyMotion - https://github.com/Lokaltog/vim-easymotion #

Really handy to quickly move though a file, I don’t use it very often as I like to be able to efficiently move the “default” Vim way, but for very long lines or very specific or quick movements it’s awesome, one can get used to this pretty quickly.

Surround - https://github.com/tpope/vim-surround #

Some goodies for changing surrounds, a pretty neat overall plugin to have. Surprising Vim doesn’t provide something like this by default.

Emmet - https://github.com/mattn/emmet-vim #

This is the first webdev-oriented plugin, it enables you to expand CSS selectors into HTML markup, also known as Zen Coding. It really makes writing HTML much more painless.

JSHint2 - https://github.com/Shutnik/jshint2.vim #

This one is also webdev-oriented, it’s used to perform JSHint validation on Javascript files. I configured it to run every time a *.js file is saved. Something similar could be archieved with something like Gulp or Grunt but I like the integrated solution.

CSS Color - https://github.com/skammer/vim-css-color #

Another webdev-oriented plugin, this one allows you to see a little preview of the colors specified in the CSS file, for LESS and SASS it might not be a big deal but it’s a nice little feature to have. Quite optional.

Syntax Support #

Vim doesn’t ship with support for every file type, and as a web developer we work with a lot of different languages and syntaxes, so I included what I needed, which for now is syntax support for CSS3, CoffeeScript, LESS/SASS and Jade. This also is quite personal but I’m sure CSS3 and LESS/SASS will be a pretty good addition in general.

Conclusion #

So that’s my .vimrc. It works nicely for me and I’m pretty happy with it. I’d love to know yours, and your opinion on mine and my plugins. Cheers!