Recommended Vim plugins for JavaScript coding?

Question

I'm new to JS & Vim. Which plugins would help me to write Javascript code?

Answer 1

Syntax Checking / Linting

There is a very easy way to integrate JSLint or the community-driven jshint.com (which is much better IMO) with Vim using the Syntastic Vim plugin. See my other post for more info.

Source-Code browsing / Tag-list

There's also a very neat way to add tag-listing using Mozilla's DoctorJS (formerly jsctags), which is also used in Cloud9 IDE's Ace online editor.

1. Install the following packages using your favorite package-manager (Ubuntu's apt-get, Mac's home brew, etc.):
   1. exuberant-ctags

• NOTE: After installing make sure running ctags actually runs exuberant-ctags and not the OS's preinstalled ctags. You can find out by executing ctags --version. 2. node (Node.js)

2. Clone DoctorJS from github: git clone https://github.com/mozilla/doctorjs.git
3. Go inside DoctorJS dir and make install (You'll also need the make app installed, but this is very basic).

• There're some bugs with installing the plugin, make install doesn't do the trick for the moment. For now I just add the repo's bin/ dir to my $PATH instead. See DoctorJS's GitHub and issues pages for more info.

4. Install the TagBar Vim plugin (NOTE: It's TagBar, not the old infamous TagList!).
5. PROFIT. :)

New Project - Tern.js

DoctorJS is currently dead. There's a new promising project called tern.js. It's currently in early beta, and should eventually replace it.

There is a project ramitos/jsctags which uses tern as its engine. Just npm install -g it, and tagbar will automatically use it for javascript files.

Answer 2

snipMate emulates TextMate's ⇥ insertion system and comes with a bunch of useful JS snippets (among others) by default. It's extremely easy to add your own.

javaScriptLint allows you to validate your code against jsl.

Also you can find a variety of JavaScript syntax files on vim.org. Try them and see which one works best for you and your coding style.

The native omnicomplete (ctrlx-ctrlo) works very well for me. You can make it more dynamic with autoComplPop, but it can be annoying sometimes.

edit, in response to tarek11011's comment:

acp doesn't work for JavaScript by default, you have to tweak it a little. Here is how I did it (dirty hack, I'm still a Vim noob):

In vim-autocomplpop/plugin/acp.vim I've added php and javascript (and actionscript) to behavs so that it looks like that :

let behavs = {
    \   '*'            : [],
    \   'ruby'         : [],
    \   'python'       : [],
    \   'perl'         : [],
    \   'xml'          : [],
    \   'html'         : [],
    \   'xhtml'        : [],
    \   'css'          : [],
    \   'javascript'   : [],
    \   'actionscript' : [],
    \   'php'          : [],
    \ }

A little below, there is a series of code blocks that look like that :

"---------------------------------------------------------------------------
call add(behavs.ruby, {
    \   'command' : "\<C-x>\<C-o>",
    \   'meets'   : 'acp#meetsForRubyOmni',
    \   'repeat'  : 0,
    \ })

I've duplicated this one and edited it a little bit to look like that:

"---------------------------------------------------------------------------
call add(behavs.javascript, {
    \   'command' : "\<C-x>\<C-o>",
    \   'meets'   : 'acp#meetsForRubyOmni',
    \   'repeat'  : 0,
    \ })

and did the same for actionscript and php.

If you want to edit JS/CSS within a HTML document you can do :set ft=html.css.javascript in Vim's command line to make ctrlx-ctrlo work as expected on method/properties names in JS blocks and properties/values in CSS blocks. However this approach has its drawbacks, too (weird indentation…).

Answer 3

This plugin is also useful: https://github.com/maksimr/vim-jsbeautify. It provides full autoformatting for javascript. One keystroke, and your code looks beautiful. It can come in handy when pasting code snippets as well. It makes use of the popular js-beautifier, which can also be found as an online application. The latter can be found right here: http://jsbeautifier.org/.

Answer 4

I only use one js specific vim plugin - jslint.vim - https://github.com/hallettj/jslint.vim which validates your code with jslints rules and gives you syntax errors as well.

Answer 5

To fix indentation and autoformatting (Ctrl =): JavaScript Indent

To set indentation width, add javascript.vim file into ~/.vim/ftplugin dir with following contents (for two space indentation):

 setl sw=2 sts=2 et