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:
-
Enable EPEL on the host:
yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
-
Install the node package manager (
npm
):yum install npm
-
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:
-
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
-
Extract the archive and
cd
into the directory:unzip node-v8.9.4-win-x64.zip cd node-v8.9.4-win-x64
-
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.