126

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

5
  • 6
    To give the question more clarity, and to help the OP in their English for future posts... It should read: "Hi, I'm new to JS & Vim. Which plugins would help me to write Javascript code?" You can say "I am new to Javascript and vim". You can use "what is" for singular, so for example "What is a_plugin that would help me..." or you can use "which" for plural like this: "Which_plugins would help me...". Also notice that instead of "plugins is" you should use "plugins would" because it's a hypothetical. Hope that helps :-)
    – hendrixski
    Feb 12, 2012 at 19:04
  • 3
    @hendrixski - vote to reopen this.
    – ocodo
    Mar 13, 2013 at 8:11
  • 8
    Most constructive not-constructive question ever. Jan 26, 2014 at 23:23
  • 8
    I quite enjoy how this "not constructive" question helped me improve a lot my workflow.
    – MaiaVictor
    Mar 7, 2014 at 6:41
  • Since the question is (unfairly IMO) closed, I'll just add a comment here: there's an electron-based front-end for NeoVim with typescript language server autocompletion out of the box (works with vanilla JS too!): onivim.io. It's still a bit rough around the edges but I've been using it as my daily driver for a few weeks now and haven't had too many issues. It has a really good community around it, and it's under very heavy development, so I expect good things from it in the future! Full disclosure: I make a monthly donation to the project and plan to contribute in the future. Mar 25, 2018 at 1:49

5 Answers 5

116

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)
  1. Clone DoctorJS from github: git clone https://github.com/mozilla/doctorjs.git
  2. 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.
  1. Install the TagBar Vim plugin (NOTE: It's TagBar, not the old infamous TagList!).
  2. 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.

15
  • 5
    +1 for TagBar (was only aware of TagList!)
    – RobM
    May 27, 2011 at 15:19
  • 9
    Currently doctorjs requires you to clone recursive as specified in this bug, git clone --recursive https://github.com/mozilla/doctorjs.git and then make install should work
    – Andy Ray
    Sep 7, 2011 at 20:46
  • 1
    doctorjs on Windows: baumichel.blogspot.ca/2011/11/… adding additional filetypes to TagBar: github.com/majutsushi/tagbar/wiki
    – Andrew
    Jun 5, 2012 at 18:34
  • 6
    Before doing step 3, cd into doctorjs and do this: git submodule init && git submodule update. Then do step 3.
    – glortho
    Jul 12, 2012 at 12:02
  • 2
    The brew command is actually brew install ctags-exuberant
    – sym3tri
    Aug 7, 2012 at 20:17
17

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

7
  • How did you do those cool looking keystrokes? Jan 24, 2011 at 8:47
  • 1
    Haha, it's <kbd></kbd>. Browsers usually have no default styling for this tag, kudos to the SO team for doing the extra work.
    – romainl
    Jan 24, 2011 at 9:29
  • thank you romainl , but a have a problem with autoComplPop it is work only with html file no js and css and php Jan 24, 2011 at 12:48
  • Like a lot of Vim plugins acp is very sensitive to filetypes. If the buffer's filetype is "html", neither acp nor omni complete will work for embedded JS/CSS/PHP. And I'm going to edit my answer, not enough editing options/room here.
    – romainl
    Jan 24, 2011 at 13:10
  • You may prefer to use the current maintenance branch of snipMate that Rok Garbas & co. put together.
    – thisgeek
    Jan 9, 2012 at 18:07
8

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

2
6

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.

2
  • thanks but I think I have a problem look at img69.imageshack.us/img69/7629/11142565.png Jan 24, 2011 at 13:29
  • Hm, on windows there are specific instructions you'll need to follow, it requires a javascript interpreter. I haven't tried installing it on windows, but the install instructions are down the page a bit in the README, sorry I can't be more help there.
    – Scott
    Jan 24, 2011 at 14:11
3

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
1
  • in ~/.vimrc : autocmd FileType javascript setlocal sw=2 ts=2 sts=2
    – JuanPablo
    Nov 5, 2014 at 14:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.