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:
Top comments (2)
Thank you so much for sharing your knowledge with us!
Quite informative! Does it make any difference if I choose to use a different parser other than the default?