Context
It used to be that you had to set the EXTEND_ESLINT flag to true in your .env file, and then add this to your package.json
// package.json
"eslintConfig": {
"extends": [
"react-app",
"./.eslintrc.json"
]
},
Since CRA4 it is possible to extend the base eslint configuration used during the compiling process, without enabling any flag since, apparently, it's enabled by default
My .eslintrc.json file is this
// .eslintrc.json
{
"extends": [
"react-app",
"plugin:jest-dom/recommended",
"prettier",
"plugin:@typescript-eslint/eslint-recommended"
],
"plugins": ["jest-dom", "@emotion", "@typescript-eslint"],
"rules": {
"no-unused-vars": "off",
"no-console": "warn"
},
"overrides": [
// TS only rules
{
"files": ["**/*.ts?(x)"],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "error"
}
}
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
}
}
and my package.json is this
// package.json
"eslintConfig": {
"extends": [
"./.eslintrc.json"
]
},
Running eslint src --fix-dry-run --ext .tsx,.ts,.js,.jsx gives me ā 30 problems (2 errors, 28 warnings)
The problem
It is my understanding that the same errors should show up when CRA compiles the code, since, supposedly, the eslint configuration is extended. However, my project builds just fine, with no warnings at all.
Things I have tried
// package.json
"eslintConfig": {
"extends": [
".eslintrc.json"
]
},
// package.json
"eslintConfig": {
"extends": [
"react-app", // even though my config already extends that
"./.eslintrc.json"
]
},
// package.json
"eslintConfig": {
"extends": [
"react-app", // even though my config already extends that
".eslintrc.json"
]
},
// package.json
"eslintConfig": {
//move my whole eslint configuration here and remove the .eslintrc.json file
},
Nothing seems to actually extend the eslint configuration that CRA uses when it compiles.
The question
Do I do something wrong here, or does this look like an issue with CRA?