Developing JavaScript in Vim

Vim is great for coding, anyone can tell you that. It is customizable and extendable beyond anything I have encountered. However this is not seen as s plus immediately by JavaScript developers.

In this post I will try to summarize my experience with Vim for JavaScript programming and in particular with closure tools and node.

First of course you will need Vim 7.x. You will also need exuberant ctags or gjstags. The former is preferred though (explained later) and a JavaScript hinter/linter (jsl, jshint, jslint or gjslint).

Now for the vim plugins: you will need syntactic, taglist, nerd three and writeJSDOCcommen.

ctags is used to annotate your code and while it does not have the fancy options of Aptana Studio or Eclipse (like annotation for variables in the scope of a method or the properties of an object enumerated in the Object annotation as well as properties on its prototype all arranged in a nice tree view) it has something I often fine more useful - the fact that it is able to append the annotations so when you have opened 10 files and you see only one in your editor you still see all annotations for all open files. This is especially useful when working with code you do not know well (like the vast closure library for example, did I mentioned that I struggled with a tool to help me getting better knowledge of closure).

To use ctags effectively in vim I would suggest taglist. I use the following option setting in my vimrc:

let tlist_javascript_settings = 'javascript;f:functions;c:classes;m:methods;p:properties;v:globals'


This is - I want everything annotated in JavaScript files. I also use this shortcut:

nmap :TlistToggle


In ftplugin/javascript.vim I also have:

nnoremap   :call WriteJSDocComment()

This is not extremely useful, but a time saver. This was for code annotation, not lets begin with code checking.  I used to go with node js and jshint, but the truth is it does not make sense to install node js just to run hinting on it - after all it is marketed as server side JavaScript. Hinting is actually better done with syntactic.

By default it will look for any linter installed, I tried gjslint (the closure instrumentation linter) and jsl. The former tend to be too much closire library centric so probably the later would be better if you are not developing with closure in mind. Also the gjslint executable is much slower on larger files.


The last is NERD_tree which is not JavaScript must have, but it helps a lot see and browse your files as you do in any other IDE.

What I was not able to find is help system that is able to read JSDoc annotation for JavaScript and hint the usage. If anyone knows about such, please let me know.

PS: I often switch OSes, Looks and feels, IDEs and editors, browsers etc. I like diversity. However to this day I have not found the perfect JavaScript editor. Every one out there has a feature that I like but the others lack and each one lacks multiple features I like. Looks like finding the perfect tool is a never ending quest.