Recommended Vim plugins for JavaScript coding? [closed]

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

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

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)

Clone DoctorJS from github: git clone https://github.com/mozilla/doctorjs.git
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.

Install the TagBar Vim plugin (NOTE: It's TagBar, not the old infamous TagList!).
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.

Solution 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…).

Solution 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/.

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

Solution 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