Recommended Vim plugins for JavaScript coding? [closed]
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 homebrew
, etc.):exuberant-ctags
- NOTE: After installing make sure running
ctags
actually runsexuberant-ctags
and not the OS's preinstalledctags
. You can find out by executingctags --version
.2.node
(Node.js)
- Clone
DoctorJS
from github:git clone https://github.com/mozilla/doctorjs.git
- Go inside
DoctorJS
dir andmake install
(You'll also need themake
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'sbin/
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.
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…).
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/.