💛 ESLint config that only helps you, and otherwise stays out of your way
ESLint is a great tool, but people too often abuse it.
Although a linter can be a helpful companion when you are new to a language, it can get in the way once you are more familiar with the language.
Even worse, misguided linter rules can teach a user to fear patterns which aren't problematic in practice.
I got tired of ESLint configs that included annoying rules that would yell at me even though the code would work just fine as written.
I wanted an ESLint config that would stay silent most of the time, but when it spoke up, it would be helpful rather than annoying. Thus, unobtrusive
was born.
unobtrusive
was made with the following goals in mind:
eslint-disable
comments.This config assumes the following:
env
in your eslint config yourself.These are the criteria I used to decide which rules to include:
indent
).
yoda
, curly
, and dot-notation
).
eqeqeq
and class-methods-use-this
).
no-console
.
console.log
s in their codebase.no-undef
.
no-unused-expressions
.
Also, in the config itself (index.js
), each rule has a comment above it explaining my thought process behind turning it either on or off. I have included every eslint rule in the config, even if I am setting it to the default value, so that you can understand the reasoning behind the decision.
Install the package
$ npm install eslint-config-unobtrusive
Add it to your eslint config:
.eslintrc
{
"extends": "unobtrusive",
"env": {
"browser": true
}
}
That's it!
The env
config option is required, because eslint-config-unobtrusive includes the no-undef
rule, which warns you when you access a variable that is not defined. In order to know which variables are defined, ESLint looks for variable declarations in the same file and also references a list of known globals. The env
config option is used to configure the list of known globals in your environment.
You can also use the globals
option to add additional names to the list of known globals:
{
"extends": "unobtrusive",
"env": {
"browser": true
},
"globals": {
"jQuery": false,
"selectedColor": true
}
}
The key/value pairs of the globals
option refer to the name of the global and whether it is writable (so false
indicates that the global is read-only).
unobtrusive
also comes with some extra configs that you can add to get additional functionality. They follow the same philosophy as unobtrusive
, but aren't enabled by default because they might not work out-of-the-box for every user.
unobtrusive/import
This extra config depends on eslint-plugin-import
and adds rules that warn you when attempting to import or require things that don't exist. It's not included in the base unobtrusive
config because it would flag false positives for users relying on custom import resolution mechanics, like webpack loaders or NODE_PATH
.
Install unobtrusive
first
Install eslint-plugin-import
$ npm install eslint-plugin-import
Add unobtrusive/import
to your eslint config:
.eslintrc
{
"extends": ["unobtrusive", "unobtrusive/import"],
"env": {
"browser": true
}
}
That's it!
unobtrusive/react
This extra config depends on eslint-plugin-react
and adds React-specific rules that are in line with the unobtrusive
philosophy. It also configures eslint
so that it can parse JSX properly, and fixes some JSX-related false positives and false negatives with no-unused-vars
and no-undef
. It's not included in the base unobtrusive
config because not all users use React.
Install unobtrusive
first
Install eslint-plugin-react
$ npm install eslint-plugin-react
Add unobtrusive/react
to your eslint config:
.eslintrc
{
"extends": ["unobtrusive", "unobtrusive/react"],
"env": {
"browser": true
}
}
That's it!
unobtrusive/flowtype
This extra config depends on eslint-plugin-flowtype
and babel-eslint
and adds flow-specific rules that are in line with the unobtrusive
philosophy. It also configures eslint
so that it can parse flow types properly, and fixes some type-related false positives and false negatives with no-unused-vars
and no-undef
. It's not included in the base unobtrusive
config because not all users use flow.
Install unobtrusive
first
Install eslint-plugin-flowtype
and babel-eslint
$ npm install eslint-plugin-flowtype babel-eslint
Add unobtrusive/flowtype
to your eslint config:
.eslintrc
{
"extends": ["unobtrusive", "unobtrusive/flowtype"],
"env": {
"browser": true
}
}
That's it!
NOTE: To use
unobtrusive
,unobtrusive/import
,unobtrusive/react
, andunobtrusive/flowtype
together, your eslint config would look like this:{ "extends": [ "unobtrusive", "unobtrusive/import", "unobtrusive/react", "unobtrusive/flowtype" ], "env": { "browser": true } }