Understanding ESLint Configuration

In this post, I try to make sense of the commonly used configuration options in .eslintrc. This is only a quick introduction and not a comprehensive list of all the available settings.

ESLint works on a system of "rules". These rules help you maintain consistency, enforce best practices and catch potential bugs in your code. The default eslint package comes with a set of built-in rules, but you can add more using plugins.

parser

A parser converts your source code into a format that ESLint understands. By default, ESLint uses a parser called "Espree", but you can use a different one by specifying it in the parser field of your .eslintrc file. For example, to be able to lint TypeScript code, you'll need to install the @typescript-eslint/parser package and specify it in .eslintrc:

{
  "parser": "@typescript-eslint/parser"
}

plugins

A plugin may contain rules, configs and environments. For example, if you install the React ESLint plugin (eslint-plugin-react package), you can enable it in .eslintrc like so:

{
  "plugins": ["react"] // omit the "eslint-plugin-" prefix
}

This lets you use the rules that have been defined in the plugin. The plugin may also provide "configs", which apply a set of these rules in bulk. You can enable these configs by including them in the extends field (see below).

extends

This field allows you to apply configs, which are a set of rules that are applied in bulk. You can install a standalone config as an npm package (like eslint-config-airbnb). Some plugins also provide their own configs (for example, eslint-plugin-react provides a config named recommended). ESLint also ships with its own recommended config.

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended", // configs from plugins use the notation plugin:<plugin name>/<config name>
    "airbnb", // omit the "eslint-config-" prefix for standalone configs
    "../path/to/my/custom/config.js"
  ]
}

rules

This field lets you change settings for individual rules. If you've installed any plugin(s), you can also specify any rules included by it. Finally, you can also override any rules applied from a config. A rule's value can be one of off, warn or error.

{
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"],
    "plugin1/rule1": "error" // rules from plugins have the notation <plugin-name>/rule-name
  }
}

env

An environment provides predefined global variables. This lets you use global variables such as the window and global objects available in browser and node environments. To enable specific environments, add them to the env object in your .eslintrc like so:

{
  "env": {
    "browser": true,
    "node": true
  }
}

Check the docs for the full list of supported environments. You can also add environments from plugins.

Thanks for reading!

References:

• Docs - Configuring ESLint
• This StackOverflow thread