#syntastic

More linting is good

Well we’ve been using mypy and other python checking for a while, but just realized that there are ton more for just about any file type:

Shellcheck. this is a a great utility that finds all kinds of errors. In my best written shell script, it identified two serious bugs I didn’t realize that I had. The first are unreachable options to getopt. Pretty indispensable.

Dockerfilelint. This is…

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

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

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

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.

Result

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