ESLint

What is ESLint?

ESLint is a pattern identifying and reporting tool for JavaScript code. Somewhat it is similar to JSLint and JSHint with few differences:

ESLint uses:

  • A parser called Espree for parsing JavaScript.
  • An AST to evaluate patterns in code.
AST

AST stands for Abstract Syntax Tree. Mozilla’s SpiderMonkey,Babel-ESLint and ECMAScript Esprima are two parsers for viewing abstract syntatic structure of the source code.

ESLint does not sound as strict as it sounds. It is designed to be fully configurable, by turning off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules.

ESLint to define your own rules

The biggest feature of ESLint, is that you can develop the rules on your own. Or it is common to find an existing set of rules that come close to what you want, then customise from there.

An example of this is eslint-config-airbnb based on the AirBnB JavaScript Style Guide.

{
  "extends": "airbnb",
  "rules": {
    "default-case": 0,
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "quotes": 0,
    "quote-props": [1, "consistent-as-needed"],
    "no-cond-assign": [2, "except-parens"],
    "no-else-return": 0,
    "no-param-reassign": 0,
    "no-unused-vars": [1, {"vars": "local", "args": "none"}],
    "space-infix-ops": 0
  }
}

There are two primary ways to configure ESLint:

  1. Configuration Comments – JavaScript comments to embed configuration information directly into a file.
  2. Configuration Files – A JSON or YAML file to specify configuration information for an entire directory and all of its subdirectories.
Configuration Files

This can be in the form of:

  1. An .eslintrc file
  2. An eslintConfig field in a package.json file
  3. Specify a configuration file on the command line.

First two options of above will be read by ESLint automatically

There are several pieces of information that can be configured:

  • Environments – which environments your script is designed to run in.
  • Globals – the additional global variables your script accesses during execution.
  • Rules – which rules are enabled and at what error level.

All of these options give you fine-grained control over how ESLint treats your code.

Specifying Parser

By default, ESLint uses Espree as its parser. You can optionally specify that a different parser
should be used in your configuration file so long as the parser meets the following requirements:

It must:

  1. Produce Esprima-compatible AST and token objects.
  2. Have an Esprima-compatible interface (it must export a parse() method).
  3. Be an npm module installed locally.

Note that even with these compatibilities, there are no guarantees that an external parser will work correctly with ESLint and ESLint will not fix bugs related to incompatibilities with other parsers.

To indicate the npm module to use as your parser, specify it using the parser option in your .eslintrc file. For example, the following specifies to use Esprima instead of Espree:

{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}

when using a custom parser, the parserOptions configuration property is still required for ESLint to work properly with features not in ECMAScript 5 by default. Parsers are all passed parserOptions and may or may not use them to determine which features to enable.

Be first to comment

Leave a Reply