I'm new to JS & Vim. Which plugins would help me to write Javascript code?
-
6To 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 :-)– hendrixskiFeb 12, 2012 at 19:04
-
3@hendrixski - vote to reopen this.– ocodoMar 13, 2013 at 8:11
-
8Most constructive not-constructive question ever.– Vladislav ZorovJan 26, 2014 at 23:23
-
8I quite enjoy how this "not constructive" question helped me improve a lot my workflow.– MaiaVictorMar 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.– Parker AultMar 25, 2018 at 1:49
5 Answers
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.
-
5
-
9
-
1doctorjs on Windows: baumichel.blogspot.ca/2011/11/… adding additional filetypes to TagBar: github.com/majutsushi/tagbar/wiki– AndrewJun 5, 2012 at 18:34
-
6Before doing step 3, cd into doctorjs and do this:
git submodule init && git submodule update
. Then do step 3.– glorthoJul 12, 2012 at 12:02 -
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…).
-
-
1Haha, it's <kbd></kbd>. Browsers usually have no default styling for this tag, kudos to the SO team for doing the extra work.– romainlJan 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.– romainlJan 24, 2011 at 13:10
-
You may prefer to use the current maintenance branch of snipMate that Rok Garbas & co. put together.– thisgeekJan 9, 2012 at 18:07
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/.
-
3I wrote a general autoformatting plugin for vim which integrates the js-beautifier and more. Check here: github.com/Chiel92/vim-autoformat– chtenbDec 6, 2012 at 23:13
-
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.
-
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.– ScottJan 24, 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