In my most recent blog post I wrote about the JavaScript tooling we are using in our projects. One of these tools is ESLint (linter for EcmaScript). It is an utility that takes your EcmaScript code and validates it against the set of rules. If something does not match, an error or warning is returned by the linter.

Let’s see an example. I can make linter notify me if I did forget to add a semicolon at the end of each statement. And it will show up in my editor

But there are some more serious rules than the semicolons-guarding. Misspelled arguments, using undefined stuff, leaving dead code. The list of configurable rules is huge.

In a project I am working right now, there is a big problem of globals that comes in window during runtime of our front end. ESLinter helped me to catch and fix all pieces of code using those globals in few minutes.

Also react plugin is helpful when upgrading from older versions of React.

In this post, I will describe how to setup ESLint and integrate it with:

SublimeText 3

Atom

Vim

Jetbrains editors like RubyMine, WebStorm, Intellij.

Setup a linter

In this guide I will be encouraging you to use eslint-config-airbnb which is a great starting configuration. It also requires us to use 3 plugins with it:

Each one of these plugins comes with additional rules for code linting.

If you are using Node through NVM, then you may have a some troubles with getting everything up and running. I tried to solve the problems on different environments and failed with finding one good solution.

The easiest way to get started is to install the linter globally. Do this if you are using Vim or don’t want to store ESLint in your project’s dependencies.

npm install -g eslint babel-eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import

If you can, you should keep ESLint inside your project. To do so, just run this inside your project’s package:

npm install --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import

Ok, so now is the time to create a .eslintrc file inside of your project directory.

{

"extends": "airbnb",

"parser": "babel-eslint",

"env": {

"browser": true,

"es6": true,

"commonjs": true

},

"plugins": ["react"]

}

Note that env parameters are an example. Adjust it accordingly to your environment’s needs.

You can now try to run linter using a console:

# Using global

eslint <code_path> # From installed module

./node_modules/eslint/bin/eslint.js <code_path>

Integration with editors

Just follow instructions below and make sure you open your code with .eslintrc in the root of project’s directory.

SublimeText 3

Thanks for Dan Abramov for describing this method in his blog post

Let’s assume you have a package manager for Sublime and can install packages.

First, remove all linting plugins for JavaScript/EcmaScript/JSX from your Sublime (if you have any).

Next, install these packages:

babel-sublime

SublimeLinter

SublimeLinter-contrib-eslint

Now get to the user settings of SublimeLinter. Add this line into syntax_map object:

"javascript (babel)": "javascript",

You can also open some .js file and change the default syntax to babel.