Using Vim with Syntastic and ESLint

Wouldn’t it be nice to set up automatic linting of JavaScript when using Vim? Well, with Syntastic and ESLint, you can do just that.

Installation

First you’ll need to install Syntastic and ESLint if you haven’t already.

Feel free to check out Syntastic’s installation steps. But personally, I recommend using Vundle to manage Vim plugins.

If you have Vundle installed, open your Vim config file:

vim ~/.vimrc

Then add the plugin:

" .vimrc
Plugin 'vim-syntastic/syntastic'

Finally save, reload, and install:

:write
:source %
:PluginInstall

Now install eslint globally:

npm install eslint --global

Add it as a Syntastic JavaScript checker in your .vimrc:

" .vimrc
let g:syntastic_javascript_checkers=['eslint']

Reload your .vimrc after saving the changes:

:source $MYVIMRC

Now you’re set for any project that uses ECMAScript 5.

But what if you have the following .eslintrc:

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "plugins": ["react"]
}

The config, parser, and plugins do not come with ESLint by default.

You’ll need to install them in order for your linter to work.

One approach is to install them globally:

npm i -g eslint-config-airbnb babel-eslint eslint-plugin-react

But this can get tiresome when different projects have different ESLint dependencies. And you’re also polluting the global node_modules directory.

An alternative is to have Syntastic use the project-specific binary of eslint:

" .vimrc
let g:syntastic_javascript_eslint_exe='$(npm bin)/eslint'

This means that eslint and its parser and plugin dependencies must be installed locally in your project:

npm install eslint # and its related dependencies