ESLints docs details cascading inheritance of multiple config files thorughout folders.
Assuming a described setup like this:
your-project
├── .eslintrc.
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc
└── test.js
tests/.eslintrc will inherit the configurations from .eslintrc.
The docs also state that
The configuration cascade works based on the location of the file being linted. If there is a .eslintrc file in the same directory as the file being linted, then that configuration takes precedence. ESLint then searches up the directory structure, merging any .eslintrc files it finds along the way until reaching either a .eslintrc file with root: true or the root directory.
In the same way, if there is a package.json file in the root directory with an eslintConfig field, the configuration it describes will apply to all subdirectories beneath it, but the configuration described by the .eslintrc file in the tests/ directory will override it where there are conflicting specifications.
I'm wondering about the phrase where there are conflicting specifications. As I understand the docs conflicts appear with rules stating mutually exclusive behaviour in which case any rule stated later will hold precedence over the same rule being defined earlier. Otherwise rules will simply be merged.
What if I have two configs like this though:
your-project/.eslintrc:
{
"root": true,
"extends": ["plugin:es5/no-es2015", "airbnb-base/legacy", "prettier"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "script"
},
"env": {
"browser": true
},
"plugins": ["compat", "es5"],
"rules": {
"compat/compat": 2,
//Override AirBnB Rule Set
"no-plusplus": [2, {"allowForLoopAfterthoughts": true}]
}
}
your-project/tests/.eslintrc:
{
"root": true,
"extends": ["airbnb-base", "prettier"], //Use "current" ECMAScript instead
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "script"
},
"env": {
"browser": true,
"mocha": true
},
"plugins": [],
"rules": {
//Override AirBnB Rule Set again. I actually want to inherit this from your-project/.eslintrc though
"no-plusplus": [2, {"allowForLoopAfterthoughts": true}]
}
}
In the given cases I want to account for legacy JavaScript with code actually exposed to the user using eslint-plugin-compat, but this shouldn't apply to any tests (I do want to be able to use modern JS syntax here). Hence, my goal is to allow "newer" JS syntax within the test folder.
Since I use "extends": ["airbnb-base", "prettier"] in the config of the test folder I was hoping that rules from the root folder wouldn't apply (specifically all the rules from "plugin:es5/no-es2015").
This is not the case though. All the rules from this rule set are inherited and complain about the usage of JS syntax from ES6 and forward.
I also tried using the override option in your-project/.eslintrc to force that "plugin:es5/no-es2015" and "airbnb-base/legacy" are not being used. But this didn't do nothing:
//More config
"overrides": [
{
"files": ["test/*.js"],
"extends": ["airbnb-base", "prettier"], //Specifically only use these instead of the ones specified in the extends option in the file
"plugins":[] //Leave empty in hope it doesn't use the ones from the actual plugins entry
}
]
//More config