Understanding ESLint Configuration
Tags: javascript
Published: 2021-04-03 12:11:44

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:
```json
{
  "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:

```jsonc
{
  "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.
```jsonc
{
  "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`.

```jsonc
{
  "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:
```json
{
  "env": {
    "browser": true,
    "node": true
  }
}
```
Check the [docs](https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments) for the full list of supported environments. You can also add environments from plugins.

---
Thanks for reading!

References:
- [Docs - Configuring ESLint](https://eslint.org/docs/user-guide/configuring/)
- [This StackOverflow thread](https://stackoverflow.com/questions/53189200/whats-the-difference-between-plugins-and-extends-in-eslint)