[英]create-react-app — how to set EXTEND_ESLINT to true?
I have created a .env
file in my project root but I'm new to working with environments / variables and so I'm unsure how to integrate the file so I can override the stock, non-ejected react-app eslint settings.我在我的项目根目录中创建了一个
.env
文件,但我不熟悉环境/变量,所以我不确定如何集成该文件,以便我可以覆盖库存的、未弹出的 react-app eslint 设置。
// My .env file has just this
EXTEND_ESLINT = "true"
The cra docs explain what the variable is, but not now to set it to true. cra 文档解释了变量是什么,但不是现在将其设置为 true。 Also, the section on 'Extending the ESLint config' is helpful only for once the var is set to true.
此外,“扩展 ESLint 配置”部分仅在 var 设置为 true 时有用。
// stock create-react-app package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
In the project root directory, you can create the .env
file with EXTEND_ESLINT
set to true
so as to extend the ESLint config:在项目根目录下,您可以创建
.env
文件并将EXTEND_ESLINT
设置为true
以扩展 ESLint 配置:
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.尝试使用create-react-app版本 3.4.1,即撰写本文时的最新版本。
As an example, you can override the no-unused-vars
rule in the package.json
, as below:例如,您可以覆盖
package.json
的no-unused-vars
规则,如下所示:
...
"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, eg, 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.现在运行 linter,例如
npm run lint
,即使您已将值分配给变量但从未在应用程序中使用它,您也不会看到任何警告,这是您通常会在默认设置中看到的警告。 For example:例如:
const App = () => {
let myVar = 1; // Never used
...
}
Note : npm start
and npm run build
, etc., will also honour the extended rules.注意:
npm start
和npm run build
等也将遵守扩展规则。
By the way, the original package.json
looks like this:顺便说一下,原来的
package.json
看起来是这样的:
...
"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:注意:另一种配置 ESLint 的方法是从
package.json
文件中删除eslintConfig
条目,并在项目根目录中创建.eslintrc
或.eslintrc.json
如下:
{
"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. [更新]如果您发现 react-scripts 不遵守您对 ESLint 规则的更改,这很可能是由缓存引起的。 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:您可以在
node_modules/react-scripts/config/webpack.config.js
手动禁用缓存,如下所示:
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.
所以没有这样的缓存问题。
After struggling for hours, thanks to @Yuci my eslint is finally understanding my configurations.经过几个小时的努力,感谢@Yuci,我的 eslint 终于理解了我的配置。
Instead of directly fixing the package file in node_modules/react-scripts/config/webpack.config.js
, I have added npm scripts to always bust out the cache in start of npm run start
and npm run build
.我没有直接修复
node_modules/react-scripts/config/webpack.config.js
的包文件, node_modules/react-scripts/config/webpack.config.js
添加了 npm 脚本,以始终在npm run start
和npm run build
npm run start
清除缓存。 This way you don't have to fear for 'accidentally' rebuilding the package in the future by rm -rf node_modules; npm install
这样您就不必担心将来会“意外”通过
rm -rf node_modules; npm install
rm -rf node_modules; npm install
-- future me is not that clever. rm -rf node_modules; npm install
未来的我没那么聪明。
in packages.json
, change the scripts entity like the following:在
packages.json
,更改脚本实体,如下所示:
"scripts": {
"start": "npm run clear_cache:eslint && react-scripts start",
"build": "npm run clear_cache:eslint && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"clear_cache:eslint": "rm -rf node_modules/.cache/eslint-loader"
},
a short answer is to just inline in the script
command like一个简短的答案是在
script
命令中内联,例如
{
"scripts": {
"start": "EXTEND_ESLINT=true react-scripts start"
}
}
but this is less than ideal since you'd have to add EXTEND_ESLINT=true
to all the other react-script
commands as well但这不太理想,因为您还必须将
EXTEND_ESLINT=true
添加到所有其他react-script
命令
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.