Equipping Vim for JavaScript

I absolutely love Vim. I use it for all of my writing, be that code or blog posts, which includes the funny language JavaScript. Sure you can open up Vim and start mashing JavaScript, but you’ll probably be yearning for a little help from your editor.

With a little bit of work you can actually set up Vim to give you pretty good suggestions (not just based on dumb strings!), great highlighting, perfect indentation and automatic linting. If you haven’t tried this kind of thing before, welcome to the wonderful world of Vim bundle soup.

Managing the bundles

I use Vundle to manage all of my bundles, I’d recommend it to anyone looking to manage an extensive amount of bundles. It’s pretty easy to use and is kind of built for downloading from GitHub, which is where all the bundles I am going to suggest are located.

I’m not going to cover using Vundle here because the repository covers it perfectly. So you should go and get Vundle set up before proceeding, it should only take a couple of minutes.

All things syntax

You may notice that JavaScript isn’t exactly smooth to write in a default Vim install. You can rectify all of it’s problems really easily.

Colours (British spelling, deal with it)

First, you will want to make sure that you have decent normal Vim colouring by adding something like this to your .vimrc.

This is mainly geared towards terminal Vim, so just take what you need. It will help to enable the 256 colour pallet, enable syntax highlighting, let Vim know we want a dark background and light foreground and finally set a different colour scheme.

I use distinguished at the moment, it’s a great dark theme that runs excellently in a terminal and is really easy on the eyes. You should use a theme you want, but it’s good to grab one that was built with JavaScript in mind.

Now you are going to want to install jelera/vim-javascript-syntax by adding this to your .vimrc (or dedicated bundle file as I have).

After configuring and executing vim +BundleInstall (learn about Vundle if you haven’t already!) your JavaScript should look a lot nicer.

Indenting (plus a couple of extra visual features)

The perfect bundle to compliment vim-javascript-syntax is pangloss/vim-javascript. This bundle will add a tiny bit more highlighting as well as completely fix the weird indentation in standalone JavaScript files and code that’s embedded within HTML (shudder).

You can combine vim-javascript with nathanaelkane/vim-indent-guides to get lovely highlighting for your perfectly indented callback hell. It’s a great indicator for what is lined up with what.

You’ll also need to actually enable indentation in Vim if you haven’t already.

Automate some typing

One bundle I can’t live without is Raimondi/delimitMate, it will automatically add the closing quote, bracket or any other thing you’re typing that needs a counterpart character to stop your browser going haywire on the next refresh.

Something I’ve found to be very useful, which doesn’t require any bundles other than delimitMate really, is to add a key binding that will split my current line. So if I type {, delimitMate will insert } after my cursor, then I can execute my binding that will insert a new line in the middle of the two ready to receive some code.

This is actually very easy to set up, all you need to do is add this to your .vimrc and tweak it as you see fit.

That will map Ctrl+C whilst still within insert mode to the line splitting command. You can obviously rebind it if you want, but I think this works really well.

Linting integration

If you need linting in any language you should turn to scrooloose/syntastic. It doesn’t do much on its own, but combine it with an external linter and you have amazing live linting with indicators pointing to your problems within your actual code.

So once you have syntastic installed you will want to grab something that will lint your JavaScript. The obvious choice is the absolutely wonderful JSHint. All you have to do is install it globally with NPM and syntastic will do the rest.

Amazing code completion

This is the most complicated thing to get going, but it’s still pretty easy as install processes go. My first suggestion for auto completing your code would be to install Valloric/YouCompleteMe.

This is an optional extra really, it will automatically popup with suggestions as you type and works for a lot of languages. It’s a bit dumb with JavaScript to begin with though, that’s because it uses string based suggestions. It has no idea what variables actually contain, it just lists words and names you have used previously to help you along.

Now to put the icing on the cake: marijnh/tern_for_vim. Tern is a tool that parses your JavaScript properly. It actually understands what type a property of an object is and is a lot more powerful than basic string suggestions.

Once installed, Tern will hook into YouCompleteMe (if you have installed it) through Vim’s omni completion which can be trigger manually if you need it. So as you’re typing, Tern will be parsing your JavaScript and sending back it’s suggestions via the omni completion menu which can be displayed by YouCompleteMe.

You will need to do some extra install work for both Tern and YouCompleteMe though, so please be sure to read though there documentation. YouCompleteMe requires you to compile a module to enable ridiculously fast completion and Tern needs to you go into it’s directory and download it’s NPM dependencies. Once done though, they will “just work”.

Now go and write some JavaScript

Hopefully you will now get to enjoy a similar environment to me. If you like the kind of bundles and configuration options I use then you might want to cherry-pick even more from my Vim configuration repository. It’s kind of spilled over into Tmux and Bash configuration now too, so you should be able to find at least one nice thing in there.

  • Chris O’Neil

    As a long time Vim user who is shortly going to be embarking on a journey to learn JavaScript, I found this post extremely helpful. Thanks for putting it together – it’s an excellent summary!

  • Thorsten Roggendorf

    Great posting thanks! Your code snipped come with all the HTML that highlight them making them rather less useful …

    • http://oli.me.uk/ Oliver Caldwell

      Ah, thanks for pointing this out! I recently migrated from an Octopress / Jekyll based static site to WordPress. I’ll run a find and replace over the database or something and convert all code snippets to support my syntax highlighter I have set up. You can always check the source of the original static post if you want the clean snippets for now.

    • http://oli.me.uk/ Oliver Caldwell

      And I’ve just gone through and fixed this post for you, the snippets should look correct after you refresh a few times to break through my caching. I will slowly migrate all code blocks over starting with the most popular posts. Thanks for pointing the issue out to me.

  • http://codetunnel.io/ Alex Ford

    Thanks for this. Very helpful. I had a mostly similar setup to yours already but I got several good tidbits out of this that I now love. delimitMate is super awesome and so is your shortcut to drop between completed braces.

  • george

    Thankyou! this is great, poking around in the docs I found the delimitmate has an option for the enter thingy

    let delimitMate_expand_cr = 1

    • george

      woah you wrote EventEmitter!! love it

    • http://oli.me.uk/ Oliver Caldwell

      Yep, in the original comment thread this was pointed out, so thanks for pointing this out again. For some reason when I migrated to WordPress (for the 100th time or so) it dropped a lot of my Disqus comments. DelimitMate can indeed do it for you. I’m glad you found this useful. I’m in the process of putting a more up to date version of this post together too.

  • Ben Wiles

    Thanks. I’ve had trouble getting js+vim to play nice in the past and this was super helpful.

  • Ben Leggett

    Thanks for the article, used it as my starting point. I settled on using neocomplete instead of YCM in the end however, as I’m stuck on Windows and didn’t want to futz with compiling plugin binaries. Neocomplete is pretty dang fast.