[英]Disable ESLint that create-react-app provides
create-react-app
v3.0.0 is out . create-react-app
v3.0.0 已发布。 It supports TypeScript linting internally.它在内部支持 TypeScript linting。 (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.
(太好了!)我想我了解 TSLint 开启的情况,并计划用 ESLint 替换它,但现在不行。
How to disable that linting step in react-scripts start
?如何禁用
react-scripts start
中的 linting 步骤?
/* eslint-disable */
and others are not the ones I'm looking for. /* eslint-disable */
和其他不是我要找的。
As of react-scripts
v4.0.2, you can now opt out of ESLint with an environment variable.从
react-scripts
v4.0.2 开始,您现在可以使用环境变量选择退出 ESLint。 You can do this by adding it to your .env
file, or by prefixing your scripts in your package.json file.你可以通过将它添加到你的
.env
文件中,或者在你的 package.json 文件中为你的脚本添加前缀来做到这一点。
For example in .env
:例如在
.env
中:
DISABLE_ESLINT_PLUGIN=true
Or in your package.json:或者在你的 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"
}
}
https://github.com/facebook/create-react-app/pull/10170 https://github.com/facebook/create-react-app/pull/10170
You could set EXTEND_ESLINT environment variable to true
, for example in .env
file:您可以将 EXTEND_ESLINT 环境变量设置为
true
,例如在.env
文件中:
EXTEND_ESLINT=true
Now you can extend eslint configuration in your package.json
file:现在您可以在
package.json
文件中扩展 eslint 配置:
...
"eslintConfig": {
"extends": "react-app",
"rules": {
"jsx-a11y/anchor-is-valid": "off"
}
},
...
To disable eslint you could add a file .eslintignore
with the content:要禁用 eslint,您可以添加一个包含以下内容的文件
.eslintignore
:
*
See documentation for details: https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config有关详细信息,请参阅文档: https ://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config
You can disable eslint (and override other configurations) using Craco .您可以使用Craco禁用eslint (并覆盖其他配置)。
It takes 4 changes:它需要4个更改:
npm install @craco/craco --save
craco.config.js
(in the same folder as is package.json)craco.config.js
(在与 package.json 相同的文件夹中)craco.config.js
with:craco.config.js
:module.exports = {
eslint: {
enable: false,
},
};
Finally, replace react-script
with craco
in your package.json
scripts, ie最后,在你的
package.json
脚本中用craco
替换react-script
,即
"scripts": {
"build": "craco build",
"start": "craco start",
}
This will disable ESLint.这将禁用 ESLint。 Refer to Craco documentation for examples how to extend ESLint configuration.
有关如何扩展 ESLint 配置的示例,请参阅Craco 文档。
create .env
file in your project root if its not there and add this line to it如果项目根目录不存在,则在项目根目录中创建
.env
文件并将此行添加到其中
EXTEND_ESLINT=true
add .eslintrc.js
to your project root with following content使用以下内容将
.eslintrc.js
添加到您的项目根目录
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.请注意
override > rules
部分:添加带有“关闭”标志的规则以禁用它们。
My workaround without ejecting:我没有弹出的解决方法:
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
}
}
{
"scripts": {
"eslint:disable": "REACT_APP_DEV_DISABLE_ESLINT=true",
"start": "npm run eslint:disable react-scripts start"
}
}
First ensure EXTEND_ESLINT
environment variable is set to true.首先确保
EXTEND_ESLINT
环境变量设置为 true。 It can be set in .env
file.可以在
.env
文件中设置。
For Typescript, further rules should be added in overrides array, as example below:对于 Typescript,应在 overrides 数组中添加更多规则,如下例所示:
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"eqeqeq": "warn"
}
}
]
}
}
My workaround:我的解决方法:
Add a .eslintignore file:添加 .eslintignore 文件:
*
and run eslint with --no-ignore
.并使用
--no-ignore
运行 eslint。 So you are able to setup your own eslint.因此,您可以设置自己的 eslint。 If you need a ignore file you can define it with
--ignore-path
instead of using the --no-ignore
option.如果你需要一个忽略文件,你可以使用
--ignore-path
来定义它,而不是使用--no-ignore
选项。
One way is to eject
react-scripts
- by running yarn eject
/ npm run eject
- and turn off eslint
in webpack
config file manually.一种方法是
eject
react-scripts
- 通过运行yarn eject
injection / npm run eject
runeject - 并手动关闭eslint
配置文件中的webpack
。
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
请阅读不要弹出您的 Create React 应用程序以了解它的含义以及您不应该这样做的某些原因
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
.请看一下这个分支: create-react-app 仔细看看,尤其是在
eject-tic_tac_toe
目录中,你有scripts/start.js
- 在yarn start
/ npm start
和config/webpack.config.dev.js
- 你有 webpack 的配置,在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,
}
]
}
// …
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.