Disable ESLint that create-react-app provides
ReactjsTypescriptEslintCreate React-AppReactjs Problem Overview
create-react-app
v3.0.0 is out. It supports TypeScript linting internally. (That's nice!) I think I understand the situation where TSLint is on, and am planning to replace it with ESLint, but it is not right now.
How to disable that linting step in react-scripts start
?
/* eslint-disable */
and others are not the ones I'm looking for.
Reactjs Solutions
Solution 1 - Reactjs
As of react-scripts
v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env
file, or by prefixing your scripts in your package.json file.
For example in .env
:
DISABLE_ESLINT_PLUGIN=true
Or in your package.json:
{
"scripts": {
"start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
"build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
"test": "DISABLE_ESLINT_PLUGIN=true react-scripts test"
}
}
Solution 2 - Reactjs
You could set EXTEND_ESLINT environment variable to true
, for example in .env
file:
EXTEND_ESLINT=true
Now you can extend eslint configuration in your package.json
file:
...
"eslintConfig": {
"extends": "react-app",
"rules": {
"jsx-a11y/anchor-is-valid": "off"
}
},
...
To disable eslint you could add a file .eslintignore
with the content:
*
See documentation for details: https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config
Solution 3 - Reactjs
You can disable [tag:eslint] (and override other configurations) using Craco.
It takes 4 changes:
npm install @craco/craco --save
- create
craco.config.js
(in the same folder as is package.json) - populate
craco.config.js
with:
module.exports = {
eslint: {
enable: false,
},
};
Finally, replace react-script
with craco
in your package.json
scripts, i.e.
"scripts": {
"build": "craco build",
"start": "craco start",
}
This will disable ESLint. Refer to Craco documentation for examples how to extend ESLint configuration.
Solution 4 - Reactjs
step 1
create .env
file in your project root if its not there and add this line to it
EXTEND_ESLINT=true
Step 2
add .eslintrc.js
to your project root with following content
module.exports = {
"extends": ["react-app"],
"rules": {
},
"overrides": [
{
"files": ["**/*.js?(x)"],
"rules": {
// ******** add ignore rules here *********
"react/no-unescaped-entities": "off",
"react/display-name": "off",
"react/prop-types": "off",
}
}
]
}
note that override > rules
section: add rules with "off" flag to disable them.
Solution 5 - Reactjs
My workaround without ejecting:
- Use an environment variable in .eslintrc.js like this:
module.exports = {
"extends": process.env.REACT_APP_DEV_DISABLE_ESLINT ? [] : [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:json/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react/recommended",
],
"rules": process.env.REACT_APP_DEV_DISABLE_ESLINT ? {} : {
// ...rules for production CI
}
}
- Set the variable in start script in package.json:
{
"scripts": {
"eslint:disable": "REACT_APP_DEV_DISABLE_ESLINT=true",
"start": "npm run eslint:disable react-scripts start"
}
}
Solution 6 - Reactjs
First ensure EXTEND_ESLINT
environment variable is set to true. It can be set in .env
file.
For Typescript, further rules should be added in overrides array, as example below:
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"eqeqeq": "warn"
}
}
]
}
}
Solution 7 - Reactjs
My workaround:
Add a .eslintignore file:
*
and run eslint with --no-ignore
. So you are able to setup your own eslint. If you need a ignore file you can define it with --ignore-path
instead of using the --no-ignore
option.
Solution 8 - Reactjs
One way is to eject
react-scripts
- by running yarn eject
/ npm run eject
- and turn off eslint
in webpack
config file manually.
Beware though that ejecting should not be done lightly and other options should be considered before ejecting. Please read Don’t eject your Create React App to gain some understanding of what it means and perhaps some reason's why you shouldn't
Please take a look at this fork: create-react-app closer look, especially at eject-tic_tac_toe
directory, where you have scripts/start.js
- the script where the magic happens after yarn start
/ npm start
- and config/webpack.config.dev.js
- where you have webpack's config, used in start.js
. This is the part you can be interested in to edit:
// …
module.exports = {
// …
module: {
preLoaders: [
{
test: /\.(js|jsx)$/,
loader: 'eslint',
include: paths.appSrc,
}
]
}
// …
};