Linting JavaScript with ESLint

When developing it's generally a good idea to follow a consistent style, however manually checking code can be a pain; this is where static analysis tools come in. One of the first lint tools I remember using when working with JavaScript was JSLint, however this post is going to look at a slightly more recent tool called ESLint.

Getting started

ESLint provide an interactive demo which can be used to try out the tool in a web browser. This is great for getting started, however if you use ESLint regularly you will probably want to install it.

Installing on CentOS

ESLint can be installed on CentOS with the following steps:

1. Enable EPEL on the host:

   yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
   

2. Install the node package manager (npm):

   yum install npm
   

3. Finally install ESLint using npm:

   npm install --global eslint
   

Note: the --global option is not required, however it will add the eslint command to /usr/bin/.

Installing on Windows under Cygwin

The setup process on Windows is very similar to CentOS:

1. First download a copy of NodeJS from nodejs.org:

   curl -O https://nodejs.org/dist/v8.9.4/node-v8.9.4-win-x64.zip
   

2. Extract the archive and cd into the directory:

   unzip node-v8.9.4-win-x64.zip
   cd node-v8.9.4-win-x64
   

3. Install ESLint using the npm command:

   ./npm install --global eslint
   

Note: in the example above the eslint command will be installed under the node-v8.9.4-win-x64 directory. The installation directory is OS dependant and controlled by the prefix config. You can run npm prefix to verify the current prefix directory. For more information refer to the npm docs.

Generating config

Once ESLint is install you will want to set up some configuration. There are a few ways you can do this, one of the easiest is by running eslint --init:

$ eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? No
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /home/user/example

The generated configuration file will look something like the following:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

From here you can customised the generated configuration and copy it to your home directory if you want it to be used globally. The ESLint rules documentation does a good job of explaining how to configure each rule.

Embedding config

It's also possible to embed configuration in JavaScript, this is often useful if you use third party modules. For example if you use axios, you might want to declare it as a global variable:

/* global axios */
axios.get('https://example.com/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

This will prevent the no-undef rule producing warnings similar to the following:

1:1  error  'axios' is not defined                        no-undef

Running ESLint

Once you've configured ESLint, all that's left to do is start running it against your JavaScript. The first time you run ESLint, there is a good chance you will have quite a few errors:

$ eslint wibble.js

/home/user/example/example.js
  3:1  error  Expected indentation of 4 spaces but found 2  indent
  4:1  error  Expected indentation of 8 spaces but found 4  indent
  4:5  error  Unexpected console statement                  no-console
  5:1  error  Expected indentation of 4 spaces but found 2  indent
  6:1  error  Expected indentation of 4 spaces but found 2  indent
  7:1  error  Expected indentation of 8 spaces but found 4  indent
  7:5  error  Unexpected console statement                  no-console
  8:1  error  Expected indentation of 4 spaces but found 2  indent

x 8 problems (8 errors, 0 warnings)
  6 errors, 0 warnings potentially fixable with the `--fix` option.
    $ eslint example.js

From here you should either update your code, or ESLint configuration until no errors are returned. If you're confused about any of the errors, the ESLint rules documentation is a great place to refer to.