126

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

Improve this question
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 :-) Commented Feb 12, 2012 at 19:04
  • 3
    @hendrixski - vote to reopen this. Commented Mar 13, 2013 at 8:11
  • 8
    Most constructive not-constructive question ever. Commented Jan 26, 2014 at 23:23
  • 8
    I quite enjoy how this "not constructive" question helped me improve a lot my workflow. Commented 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. Commented Mar 25, 2018 at 1:49

5 Answers 5

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

15 Comments

+1 for TagBar (was only aware of TagList!)
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
doctorjs on Windows: baumichel.blogspot.ca/2011/11/… adding additional filetypes to TagBar: github.com/majutsushi/tagbar/wiki
Before doing step 3, cd into doctorjs and do this: git submodule init && git submodule update. Then do step 3.
The brew command is actually brew install ctags-exuberant
|
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…).

Improve this answer

7 Comments

How did you do those cool looking keystrokes?
Haha, it's <kbd></kbd>. Browsers usually have no default styling for this tag, kudos to the SO team for doing the extra work.
thank you romainl , but a have a problem with autoComplPop it is work only with html file no js and css and php
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.
You may prefer to use the current maintenance branch of snipMate that Rok Garbas & co. put together.
|
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/.

Improve this answer

2 Comments

I wrote a general autoformatting plugin for vim which integrates the js-beautifier and more. Check here: github.com/Chiel92/vim-autoformat
prettitier - the best
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.

Improve this answer

2 Comments

thanks but I think I have a problem look at img69.imageshack.us/img69/7629/11142565.png
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.
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
Improve this answer

1 Comment

in ~/.vimrc : autocmd FileType javascript setlocal sw=2 ts=2 sts=2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.