How to tame your vim for JavaScript
When you log into a system, one thing you will definitely encounter would be a wild vim, with all the default plugins and no smart indent. You must tame it and bend it towards your need. The tutorial will be an in-depth tutorial on all the good plugins for JavaScript development.
bunch of tamed dogs. src: Minecraft Wiki
TL;DR: You can download the script here. The plugins involved will be pathogen, jshint, vim-javascript-syntax, syntastic, YouCompleteMe, vim-distinguished. It WILL override your .vimrc and .jshintrc, so only use it for fresh installation.
To make your life easier, you need a plugin organizer for vim. Pathogen is one of the older and better supported plugin system for vim. Installation is very easy:
mkdir -p ~/.vim/autoload ~/.vim/bundle; \ curl -Sso ~/.vim/autoload/pathogen.vim \ https://raw.github.com/tpope/vim-pathogen/master/autoload/pathogen.vim
and add the following line
execute pathogen#infect()
From this point onwards, to install a plugin, all you need to do is to clone the repo into ~/.vim/bundle, and it will be loaded into vim. You can check out more about pathogen here.All the following plugins will be installed through pathogen, except for jshint which will be covered later.
Syntastic is a plugin for syntax checking. I will assume you have installed jshint already. If not, it will be covered in a completely separate blog.
I might be repeating myself, but installing a plugin under pathogen is really simple. All you need to do is clone the repo into ~/.vim/bundle like the following
cd ~/.vim/bundle git clone https://github.com/scrooloose/syntastic.git
To enable syntastic to check when a file opens, and use jshint as the syntax checker, you need to add the following to your .vimrc
let g:syntastic_jslint_checkers=['jslint'] let g:syntastic_check_on_open=1 let g:syntastic_enable_signs=1
Done! check out Syntastic's github here for more information
vim-javascript-syntax is a syntax plugin for vim. Installation is a no-brainer
git clone https://github.com/jelera/vim-javascript-syntax.git ~/.vim/bundle/vim-javascript-syntax
The main reason I use the plugin is that it can help me fold javascript functions, by putting the following line into .vimrc
au FileType javascript call JavaScriptFold()
All the actions associated with folding and unfolding under vim can be found here.
vim-distinguished (or any other color scheme for vim)
I may be getting a little repetitive here, but installing any plugin, including colorschemes, simply needs you to clone the repo of the plugin into ~/.vim/bundle. The same goes for my faviorite color scheme, vim-distinguished
cd ~/.vim/bundle git clone https://github.com/Lokaltog/vim-distinguished
To enable the colorschem, put the following line into .vimrc
colorscheme distinguished
note that the name of the plugin does not necessarily match the actual name of the colorscheme, so make sure you enabled the right colorscheme by going through their documentation.
YouCompleteMe is a great auto-completer under vim. A lot of other autocompletion plugin requires you to use special keystrokes to make the list of possible matches show up, but YouCompleteMe does everything automatically, which is closer to what you would expect on xcode or Visual Studio. Installing the plugin is a little more work than before
git clone https://github.com/Valloric/YouCompleteMe.git cd YouCompleteMe cd third_party git submodule update --init --recursive cd .. ./install.sh --clang-completer
you need to go down to the /third_party folder to pull the submodules, and compile the whole project.
After you have installed all the plugins, vim should look like this
Notice the folds for all the functions, and the autocompletion coming into play.
If we make a syntactical mistake, jshint and syntastic will catch it and remind us
Pay attention to the smaller error message on the very bottom of the screen, and the bright yellow arrows on the side of the code. You have successfully tamed your first wild vim!