A Student's Guide to Software Engineering Tools & Techniques »

ESLint

Author: Nicholas Chua

Overview

ESLint is an open source JavaScript linter.

Code linting is a type of static analysis that helps find problematic patterns or code that does not follow a certain style guideline. JavaScript, being a loosely-typed, interpreted language, is prone to developer errors and therefore linting is especially important when working with JavaScript.

ESLint is shipped with a wide range of built-in rules that can be configured on installation. It also offers flexibility by allowing importing your own custom rules via plugins.

Rules

ESLint comes shipped with built-in rules that can be configured to suit your needs.

An example of a rule would be brace-style. It enforces a specific placement of braces relative to the control statement and body. Brace style is based on preference or organization standards, and ESLint has options to enforce the brace style of your choice. They include:

One true brace style (1TBS)

if (foo) {
  bar();
} else {
  baz();
}

Stroustrup

if (foo) {
  bar();
}
else {
  baz();
}

Allman

if (foo)
{
  bar();
}
else
{
  baz();
}

An additional option allowSingleLine can be enabled to allow opening and closing braces for a block to be on the same line:

if (foo) { bar(); }
else { baz(); }

If you are unsure about the options of the rule you want to change, you can refer to the comprehensive rule documentation.

Setting up

After installing with npm, ESLint can be configured in two ways:

Single configuration file. In this example, the rule is configured in .eslintrc.json and enforces all braces in the project to follow Allman style:

{
  "rules": {
    "brace-style": ["error", "allman"]
  }
}

Configuration comments inside your file. In this example, the comments enforces all braces in the file to follow Allman style:

/* eslint brace-style: ["error", "allman"] */
if (foo === bar) { // should be on the next line
  return;
}

Linting output:

 1:10  error  Opening curly brace appears on the same line as controlling statement  brace-style

NOTE: That specifying the rule option as "error" will result in the exit code of 1 when the rule is violated. If you wish for ESLint to alert you but not fail the linting, you may set it to "warn":

/* eslint brace-style: ["warn", "allman"] */
if (foo === bar) { // warning displayed but does not affect exit code
  return;
}

Linting output:

1:10  warning  Opening curly brace appears on the same line as controlling statement  brace-style

If you are not sure what rules to add to your project, you can import configurations published by more experienced developers or organizations.

Here are some popular style guide's configurations:

At the same time, ESLint allows you to disable rules for specific files and directories or for specific lines.

Usage

Once configured, you can lint your files with terminal commands and you can add options to the command based on your needs. A useful example would be the --fix flag which can be used to fix all fixable errors in your code.

$ eslint --fix file.js

ESLint can be easily integrated with your build tool of choice. Here are some plugins for some popular build tools. ESLint can also work with Continuous Integration tools like Travis, AppVeyor and CircleCI. Configuration is explained in this example using Travis. You can also learn how to automate ESLint to run every time you commit.


ESLint also has editor integrations such as error highlighting in many popular editors like Atom and WebStorm.

ESLint Package for Atom

Plugins

Custom rules can be imported via Plugins. You can learn how to write your own or use existing ones that are already published to npm.

A popular plugin would be eslint-plugin-lodash which is meant to enforce good practices and styling with the utility library Lodash. You can checkout other plugins here.

Resources