DEV Community

Cover image for Understanding ESLint Configuration
glocore
glocore

Posted on

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"
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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


Thanks for reading!

References:

Top comments (2)

Collapse
 
jrmaiafs profile image
jrmaiafs

Thank you so much for sharing your knowledge with us!

Collapse
 
booleanhunter profile image
Ashwin Hariharan

Quite informative! Does it make any difference if I choose to use a different parser other than the default?