Automate JS error detection with ES Lint

ESLint - only 6.6M weekly downloads - is a Javascript code quality tool that analysis your code without executing it. It will warn you about mistakes and win you a lot of time.
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions: these come with a predefined set of rules for you. ESlint has the flexibility so you can set up.

A simple example on how can this help you?

So let's get a simple example:

function(a,b){
    //do something with the variables
    return a * d;
}

This error is obvious when you have a small amount of code.
But if you have a large amount this will be very useful.
By running eslint to your code you get the next output:

1:10  error  'test' is defined but never used                  no-unused-vars
1:17  error  'b' is defined but never used                     no-unused-vars
2:1   error  Expected indentation of 1 tab but found 4 spaces  indent
3:1   error  Expected indentation of 1 tab but found 4 spaces  indent
3:16  error  'd' is not defined                                no-undef

Without ES lint you can have unwanted bugs that can make your customers unhappy.
So part of the automation process of code quality and together with automated tests you can setup eslint to get better code quality.
This will fix unwanted bugs and your clients can be happier.

You can see in the above code that this already found some errors and I have an already setup eslint configuration.
Let's do it for you now!

If you want to include ESLint as part of your project’s build system, we recommend installing it locally. You can do so using npm:

Installation and Usage
Prerequisites: Node.js (>=6.14), npm version 3+.

Just a bit related to this subject: In Appseed PRO version you can also get everything set up for easily debugging tests in VSCode. You can even get all the above code for free and use it yourself. Licensed MIT.

There are two ways to install ESLint: globally and locally.

Local Installation and Usage

$ npm install eslint --save-dev
You should then setup a configuration file:

$ ./node_modules/.bin/eslint --init
After that, you can run ESLint in your project’s root directory like this:

$ ./node_modules/.bin/eslint yourfile.js
Instead of navigating to ./node_modules/.bin/ you may also use npx to run eslint:

$ npx eslint
Note: If ESLint wasn’t manually installed (via npm), npx will install eslint to a temporary directory and execute it.

Any plugins or shareable configs that you use must also be installed locally to work with a locally-installed ESLint.

Global Installation and Usage
If you want to make ESLint available to tools that run across all of your projects, we recommend installing ESLint globally. You can do so using npm:

$ npm install -g eslint
You should then setup a configuration file:

$ eslint --init
After that, you can run ESLint on any file or directory like this:

$ eslint yourfile.js

Any plugins or shareable configs that you use must also be installed globally to work with a globally-installed ESLint.

So ESLint finds errors, inforces rules and can also fix issues automatically.
Running the fix command is easy:

./node_modules/.bin/eslint --fix --ext .js test.js

/appseed/starter-express/test.js
  1:10  error  'test' is defined but never used  no-unused-vars
  1:17  error  'b' is defined but never used     no-unused-vars
  3:13  error  'd' is not defined                no-undef

After running the fix command it returns just the errors that require your attention.
It's clear that we never use the test function in our case. And looks like I made a typo on using variable d instead of b.
Let's fix that and see the output. The code looks like this right now:

function test(a,b){
    //do something with the variables
    return a * b;
}

test(1,2);

And the output for eslint is the one bellow:

node_modules/eslint/bin/eslint.js test.js
➜  starter-express git:(feat/sequelize-orm-register) ✗

One of the best features of node you can use with npm is the package scripts.
So in your package.json you can set some commands to easily run eslint from your project or call it from you travis ci.

"scripts": {
    "start": "node index.js",
    "dev": "nodemon start",
    "lint": "./node_modules/.bin/eslint --ext .js config/ models/ routes/ seeders/ index.js",
    "lint-fix": "./node_modules/.bin/eslint --fix --ext .js config/ models/ routes/ seeders/ index.js",
  },

This is helpful because now you can just run a simple command for testing and fixing your small errors.

npm run lint
npm run lint-fix

PS: This article was first published on appseed.us blog.