Catch mistakes before you run your JavaScript code

Published in

Planet Arkency

5 min readMay 3, 2016

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.

Restart Sublime, open some problematic file…

Atom

Get into Preferences -> Install screen and install those 3 packages:

language-babel
linter
linter-eslint

Now restart the editor.

Vim

In sake of being brief in this guide, I assume you can configure your Vim and install Syntastic on your own.

I mentioned before that you should use linter from global package rather than a local package when using vim. There are 2 reasons for that:

I could not find any working configuration on the Internet that would make it working,
eslint is really slow and linting causes input lockdown for the processing time. We can solve this issue…

As the longest piece of linter runtime is a startup, you can run eslint using a daemon.

npm install -g eslint_d

I don’t think adding eslint_d as a dependency (just for Vim users) to a project is a necessarily good thing.

And lastly, add some config to ~/.vimrc

let g:syntastic_javascript_checkers = ["eslint"]
let g:syntastic_javascript_eslint_exec = 'eslint_d'

Refresh config, save checked file and…

WebStorm / RubyMine / IntelliJ

Seeing JetBrains focus more on the good support for JavaScript makes me feel good. I personally used RubyMine for a long time. It got a lovely code-analysis tools that can play along with the ESLint.

Although I used ESLint on RubyMine, the setup for WebStorm and IntelliJ should be the same. And trust me, this will be a quick one. Just set preferences like on the screenshot.