Recommended Vim plugins for JavaScript coding? [closed]

Asked 23/1, 2011 at 23:45 Answered 8/10, 2012 at 20:44

126

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

Plated answered 23/1, 2011 at 23:45 Comment(5)

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 :-) – Junco 12/2, 2012 at 19:4

@Junco - vote to reopen this. – Spinel 13/3, 2013 at 8:11

Most constructive not-constructive question ever. – Lycaonia 26/1, 2014 at 23:23

I quite enjoy how this "not constructive" question helped me improve a lot my workflow. – Moskow 7/3, 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. – Nitrosyl 25/3, 2018 at 1:49

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.

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.

Expectancy answered 23/1, 2011 at 23:46 Comment(15)

+1 for TagBar (was only aware of TagList!) – Blarney 27/5, 2011 at 15:19

@RobM: Yeah, it's way better than the old TagList. You're welcome to join it's development at majutsushi.github.com/tagbar – Expectancy 30/5, 2011 at 0:32

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 – Arianaariane 7/9, 2011 at 20:46

For anyone trying to use the latest DoctorJS, keep track of this ticket: jsctags no longer reports scope of tags (unresolved as of 10 Jan 2011) – Ethology 10/1, 2012 at 15:13

doctorjs on Windows: baumichel.blogspot.ca/2011/11/… adding additional filetypes to TagBar: github.com/majutsushi/tagbar/wiki – Parasympathetic 5/6, 2012 at 18:34

Before doing step 3, cd into doctorjs and do this: git submodule init && git submodule update. Then do step 3. – Delict 12/7, 2012 at 12:2

The brew command is actually brew install ctags-exuberant – Stopcock 7/8, 2012 at 20:17

why exuberant-ctags is needed? – Amberlyamberoid 8/10, 2012 at 7:5

tag-list doesn't support prototype function – Vtarj 10/10, 2012 at 15:16

@sunglim - This is not TagList's fault - I believe it's a bug in doctorjs which creates the source tree. TagList just shows it on Vim. – Expectancy 13/10, 2012 at 9:45

@OryBand vote to reopen this question – Spinel 13/3, 2013 at 8:11

@Slomjo how can I do that? – Expectancy 14/3, 2013 at 9:37

It looks like the tern-based solution is out: github.com/ramitos/jsctags – Importunity 25/9, 2013 at 1:23

+1 for TagBar too, browses JS classes and foo()s with ease. – Ulpian 9/3, 2014 at 13:28

It doesn't support IIFE and also AMD module. – Overthrust 11/10, 2015 at 6:40

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

Hobby answered 24/1, 2011 at 8:18 Comment(7)

How did you do those cool looking keystrokes? – Caroncarotene 24/1, 2011 at 8:47

Haha, it's <kbd></kbd>. Browsers usually have no default styling for this tag, kudos to the SO team for doing the extra work. – Hobby 24/1, 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 – Plated 24/1, 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. – Hobby 24/1, 2011 at 13:10

You may prefer to use the current maintenance branch of snipMate that Rok Garbas & co. put together. – Ethology 9/1, 2012 at 18:7

(And by "branch" I mean "fork".) – Ethology 10/1, 2012 at 15:17

@Hobby - vote to reopen this question – Spinel 13/3, 2013 at 8:10

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

Lettyletup answered 8/10, 2012 at 20:44 Comment(2)

I wrote a general autoformatting plugin for vim which integrates the js-beautifier and more. Check here: github.com/Chiel92/vim-autoformat – Lettyletup 6/12, 2012 at 23:13

prettitier - the best – Lichenology 22/10, 2017 at 8:24

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.

Guano answered 24/1, 2011 at 5:39 Comment(2)

thanks but I think I have a problem look at img69.imageshack.us/img69/7629/11142565.png – Plated 24/1, 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. – Guano 24/1, 2011 at 14:11

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

Sacks answered 30/1, 2012 at 8:30 Comment(1)

in ~/.vimrc : autocmd FileType javascript setlocal sw=2 ts=2 sts=2 – Bixler 5/11, 2014 at 14:20

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Syntax Checking / Linting

Source-Code browsing / Tag-list

New Project - Tern.js

Recommended topics

Hot tags