Equipping Vim for JavaScript

I’ve written yet another post on this, I’d recommend reading Wrangling JavaScript with Vim instead. Feel free to peruse this post too, it’s just quite a bit older!

On a related note, here’s a newer post listing some of my favourite JavaScript and Clojure plugins.

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 …

    • 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.

    • 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.

  • 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

    • 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.

  • Pingback: On Learning Vim: False Starts, Pain, and how to get past it | Matt @ Work()

  • Oliver Weiler

    For anyone interested I’m putting together a VagrantFile for setting up a Ubuntu VM for Node development with a similar vim configuration as presented here.


  • Pingback: 1 – Equipping Vim for JavaScript – blog.offeryour.com()

  • Pingback: 1p – Equipping Vim for JavaScript – Exploding Ads()

  • Harry Moreno

    awesome article! I consider myself an advanced vim user but most of these I hadn’t even realized. And my main language these days is js.

    Just want to plug https://github.com/square/maximum-awesome Not that I recommend it anymore – they need to change the package manager – but it’s how I started out using vim myself.

  • gosukiwi

    Very good suggestions. Personally I hate when a closing ” or ) is added but that’s just me, it messes me up because sometimes I need to add ; to the end of the line and I have to move the cursor anyways.

    As for autocomplete, most of the time I find dummy autocomplete to be enough but it surely doesn’t hurt to have a smarter one.

    Good job, hopefully more people will pick up Vim!

    • meshugunner

      I use this mapping

      :nnoremap -; mw$a;`w

      -; appends a semicolon to the end of the line without losing your position in the line.

  • Andrew

    I’m curious how both the jelerea/vim-javascript-syntax and the pangloss/vim-javascript syntax plugins together. When I use them, the pangloss one seems to override the other. Then again I just started learning vim so maybe my config isn’t right…

    • I’m now only using pangloss/vim-javascript, which appears to be the best. You’re probably right in that they may have conflicted. I’m also using mxw/vim-jsx for modern JavaScript things.

  • andrewray

    Just a warning, tern for vim is slow (Vim is fundamentally flawed in that it can’t do async operations), buggy, and abandonware

    • y.ol

      Are you sure? I see the last commit is from 20 days ago

    • bob

      @disqus_lVuapeZmNa:disqus neovim supports async.

    • wyclif

      Actually, vim is not “abandonware”, it is still being developed. And of course, there is neovim.

    • Hunter Leachman


    • Ken Rogers

      I believe he was saying tern was abandonware, not vim. 🙂

  • Pingback: Wrangling JavaScript with Vim | Oliver Caldwell's blog()

  • Atcold

    Vim doesn’t highlight console.log() as other editors (Atom) do. Any idea about how to fix it?

  • Avinash

    Thanks for the wonderful post. I shared this with my entire team, and our dev environment now includes most of the plugins your page mentions. I guess the only thing I find not be working quite satisfactorily is the ‘.’ or the ‘redo’ command in vim. I am assuming it is probably due to ‘delimitmate’.

    • That’s excellent! I hope it’s proving useful 🙂 with regards to repeating, do you have tpope/vim-repeat? That tends to help but there are some situations that aren’t perfect. I find it works perfectly for most cases, but I could just be lucky!

      • Avinash

        I will do so right now – thanks for the pointer :-). And maybe, add it to the blog ..

  • Avinash

    I keep coming back to this every time create a new VM or project. Thanks again @OliverCaldwell:disqus ! Just a pointer to a dead link on the page :

    “… 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).”

  • xavier

    I need the documentation to MDN and is perfect :/
    Do have an idea?

  • MasonicHacker

    You have no idea how much I love this tip!

    imap O

  • Having trouble customizing colors. How do I customize the colors of various js language features. Like right now, the highlighting of require in node is the same as strings, and that’s just confusing.