In the project root directory, you can create the .env
file with EXTEND_ESLINT
set to true
so as to extend the ESLint config:
EXTEND_ESLINT=true
Also this also works:
EXTEND_ESLINT = "true"
Tried with create-react-app version 3.4.1, the latest version at the time of writing.
As an example, you can override the no-unused-vars
rule in the package.json
, as below:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src"
},
"eslintConfig": {
"extends": ["react-app"],
"rules": {
"no-unused-vars": "off"
}
},
...
Now run the linter, e.g., npm run lint
, you will not see any warning even if you have assigned a value to a variable but never used it in your application, kind of warning which you would normally see by the default settings. For example:
const App = () => {
let myVar = 1; // Never used
...
}
Note: npm start
and npm run build
, etc., will also honour the extended rules.
By the way, the original package.json
looks like this:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
...
Note: Another way to configure ESLint is to remove the eslintConfig
entry from the package.json
file and create .eslintrc
or .eslintrc.json
in the project root directory as below:
{
"extends": ["react-app"],
"rules": {
"no-unused-vars": "off"
}
}
[Update] If you find that react-scripts is not honouring your change to the ESLint rules, it is most likely caused by the cache. It is an open issue of the project at the moment. You can manually disable the cache in node_modules/react-scripts/config/webpack.config.js
like below:
use: [
{
options: {
cache: true, // You can set it to false
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
// @remove-on-eject-begin
ignore: isExtendingEslintConfig,
baseConfig: isExtendingEslintConfig
? undefined
: {
extends: [require.resolve('eslint-config-react-app')],
},
useEslintrc: isExtendingEslintConfig,
// @remove-on-eject-end
},
Note that this workaround would only be for your local development. You don't need to do anything for your build pipeline most likely, as the pipeline usually builds from scratch; so there is no such cache issue out there.
.env
which you have.. did you try to override anything yet? does it not work?