[英]How is ESLint integrated into Create React App?
When I run npx create-react-app...
, a bare-bone React project is being created for me.当我运行
npx create-react-app...
时,会为我创建一个简单的 React 项目。 When I then peek into package.json
, there seems to be some evidence of ESLint to be present, as there is this:然后,当我查看
package.json
时,似乎有一些 ESLint 存在的证据,如下所示:
"eslintConfig": {
"extends": "react-app"
},
However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up.但是,每当我将 ESLint 安装为开发依赖项并对其进行配置时(就像我通常做的那样),VS Code 似乎都能接受它。 In this case, VS Code does not seem to recognize that there is any kind of linter present/configured.
在这种情况下,VS Code 似乎无法识别存在/配置的任何类型的 linter。 This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to
package.json
.这并不奇怪,因为 ESLint 不是我刚刚生成的 React 项目的依赖项——至少根据
package.json
。 When I try to run eslint.
当我尝试运行
eslint.
within the project's root directory, it says "command not found".在项目的根目录中,它显示“找不到命令”。
I tried to breathe life into this ESLint configuration by expanding it, so now I have this:我试图通过扩展它来为这个 ESLint 配置注入活力,所以现在我有了这个:
"eslintConfig": {
"extends": ["react-app", "eslint:recommended", "google"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
},
This changes nothing.这没有任何改变。 I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.
我以一种我知道它违反上述配置的方式操纵了源代码,但是,我没有收到任何不当行为的信号。
This leads me to a simple question: Do projects generated by create-react-app
come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?这引出了一个简单的问题:
create-react-app
生成的项目是否带有某种 ESLint 配置,如果是,我该如何正确启用和扩展它?
As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:当我被提到搜索“create react app eslint”时出现的谷歌排名第一——我显然已经读过——让我澄清一下我的意思:
ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so . ESLint 显然以一种不同的方式集成到 Create React App 中,这与使用like so手动添加到项目中的方式不同。 This is not only evident by the sheer number of people who post about their struggles of getting the two to work together.
这不仅可以从发布关于让两者一起工作的努力的人数众多中看出。 This is also evident as...
这也很明显...
eslint
command in the project root. eslint
命令。package.json
. package.json
中的依赖项。.eslintrc.*
file in the project root. .eslintrc.*
文件。 So: How do I go about ESLint in the context of Create React App?所以:我 go 如何在 Create React App 的上下文中了解 ESLint? For starters: How do I run it?
对于初学者:我如何运行它? How do I expand it?
我该如何扩展它? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?
为什么 VS Code 不接收它——即使它通常会注意到 ESLint 的存在?
Yes, create-react-app
comes with eslint
config.是的,
create-react-app
带有eslint
配置。
How do I enable and extend it correctly?
如何正确启用和扩展它?
You can check how to extend it here .您可以在此处查看如何扩展它。
{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
How do I enable it?
如何启用它?
You need to integrate it with your IDE .您需要将它与您的 IDE 集成。
How do I run it?
我如何运行它?
After integrating it, an eslint server will be running in the background and will enable linting for your IDE (sometimes restarting IDE required).集成后,eslint 服务器将在后台运行,并为您的 IDE 启用 linting(有时需要重新启动 IDE)。
I checked all your claims after running npx create-react-app example
:我在运行
npx create-react-app example
后检查了您的所有声明:
...one cannot run the eslint command in the project root.
...不能在项目根目录中运行 eslint 命令。
You can:你可以:
eslint is installed as part of the project dependency, just by running eslint globally ( eslint [cmd]
) you need to ensure it installed globally (not recommended). eslint 作为项目依赖项的一部分安装,只需通过全局运行 eslint (
eslint [cmd]
) 您需要确保它全局安装(不推荐)。
...ESLint does not seem to be a dependency within package.json.
...ESLint 似乎不是 package.json 中的依赖项。
Why should it be?为什么应该这样? That's why you using a starter like CRA.
这就是为什么你使用像 CRA 这样的启动器。 It's an inner dependency, you don't need to worry about it, that's CRA's job.
这是一种内在的依赖,你不必担心,这是 CRA 的工作。
...VS Code doesn't pick up that there is ESLint present.
...VS Code 没有发现存在 ESLint。
It does, check the OUTPUT
tab and look for ESLint
to see the server's output.确实如此,检查
OUTPUT
选项卡并查找ESLint
以查看服务器的输出。
...there is no .eslintrc.* file in the project root.
...项目根目录中没有 .eslintrc.* 文件。
You get the default configuration from CRA (which is hidden from you for focusing on coding).您从 CRA 获得默认配置(它对您隐藏以专注于编码)。 Add such file if you want to override it (you can also extend it, check the docs).
如果您想覆盖它,请添加此类文件(您也可以扩展它,请查看文档)。
Its very useful to understand what eslint actually is and how we use it React development, check out related question "Do React hooks really have to start with “use”?"了解 eslint 究竟是什么以及我们如何使用它进行 React 开发非常有用,请查看相关问题“React hooks 真的必须从“使用”开始吗? .
.
To expand on the top comment's answer:要扩展顶部评论的答案:
...ESLint does not seem to be a dependency within package.json.
...ESLint 似乎不是 package.json 中的依赖项。
Why should it be?
为什么应该这样? That's why you using a starter like CRA.
这就是为什么你使用像 CRA 这样的启动器。 It's an inner dependency, you don't need to worry about it, that's CRA's job.
这是一种内在的依赖,你不必担心,这是 CRA 的工作。
A project created with create-react-app will have react-scripts
as a dependency.使用 create-react-app 创建的项目将具有
react-scripts
作为依赖项。
react-scripts
has eslint
installed as a dependency, as seen in react-scripts package.json . react-scripts
将eslint
作为依赖eslint
安装,如react-scripts package.json 所示。
You can see if a package is installed (and where) by running npm ls <package>
in your project root.您可以通过在项目根目录中运行
npm ls <package>
来查看是否安装了包(以及安装在何处)。
npm ls eslint
shows: npm ls eslint
显示:
└─┬ react-scripts@4.0.3
└── eslint@7.21.0
This shows the dependency tree that we manually investigated by looking in GitHub at react-scripts.这显示了我们通过在 GitHub 中的 react-scripts 中手动调查的依赖关系树。
So - a project made with create-react-app does come with eslint.所以 - 用 create-react-app 制作的项目确实带有 eslint。 As it is a dependency, not something globally installed, then it must be ran with a npm script.
因为它是一个依赖项,而不是全局安装的东西,所以它必须使用 npm 脚本运行。
This is why running eslint .
这就是运行
eslint .
原因eslint .
in your terminal does not work, but using在您的终端中不起作用,但使用
"lint": "eslint .",
then npm run lint
does.然后
npm run lint
可以。 (though you may with to make the command eslint --ignore-path .gitignore .
due to a current bug ). (尽管您可以使用命令
eslint --ignore-path .gitignore .
由于当前的错误)。
Similarly, the eslint configs are installed in react-scripts
, then referenced in the default project output's own package.json
.同样,eslint 配置安装在
react-scripts
,然后在默认项目输出的自己的package.json
引用。
react-scripts
react-scripts
依赖于 ESLint I believe I have answered most of your questions in the Sections below.我相信我已经在以下部分中回答了您的大部分问题。
Here is a summary.这是一个摘要。
Do projects generated by
create-react-app
come with some kind of ESLint configuration?create-react-app
生成的项目是否带有某种 ESLint 配置?
– Yes, ESLint gets installed and configured. – 是的,ESLint 已安装和配置。
(Section 1 below.) (下文第 1 节。)
How do I enable and extend it correctly?
如何正确启用和扩展它?
– It is already enabled. – 它已经启用。 You expand it exactly as you already suggested in the question, except that you don't need to change anything under the
extends
attribute.您完全按照您在问题中已经建议的那样扩展它,除了您不需要更改
extends
属性下的任何内容。
(Sections 1 & 2 below.) (下文第 1 和第 2 节。)
ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using
ESLint 显然以不同于使用手动添加到项目中的方式集成到 Create React App 中
[npm install eslint --save-dev
andnpm init @eslint/config
?][
npm install eslint --save-dev
和npm init @eslint/config
?]
– No, it's not. –不,不是。
Installing ESLint once again ( npm install eslint --save-dev
) does add再次安装 ESLint (
npm install eslint --save-dev
)会添加"devDependencies": {
"eslint": "^7.32.0"
}
to package.json
.至
package.json
。 But that's all it does.但仅此而已。
The practical implications are none, because "eslint": "^7.32.0"
is already installed as a dependency via react-scripts
.没有实际意义,因为
"eslint": "^7.32.0"
已经通过react-scripts
安装为依赖项。
I advise against running npm init @eslint/config
, which is a command that creates a .eslintrc.*
configuration file.我建议不要运行
npm init @eslint/config
,这是一个创建.eslintrc.*
配置文件的命令。 If you do run this command, consider moving all the contents of .eslintrc.*
to package.json
under eslintConfig
.如果您确实运行此命令,请考虑将
.eslintrc.*
的所有内容移动到package.json
下的eslintConfig
。
Then delete the problematic .eslintrc.*
file.然后删除有问题的
.eslintrc.*
文件。 It might save you a lot of pain.它可能会为你省去很多痛苦。 1
1个
(Sections 1 & 5 below.) (下文第 1 和第 5 节。)
one cannot run the
eslint
command in the project root [?]无法在项目根目录中运行
eslint
命令 [?]
– Yes, you can! –是的,你可以!
It's npx eslint. --ext.js
这是
npx eslint. --ext.js
npx eslint. --ext.js
(Section 4 below.) (下文第 4 节。)
ESLint does not seem to be a dependency within
package.json
[?]ESLint 似乎不依赖于
package.json
[?]
– Yes, it is! –是的,是的!
The dependency is indirect as react-scripts
depends on ESLint and on a lot of other packages.这种依赖是间接的,因为
react-scripts
依赖于 ESLint 和许多其他包。
(Section 1 below.) (下文第 1 节。)
VS Code doesn't pick up that there is ESLint present [?]
VS Code 没有发现存在 ESLint [?]
– Yes, it does! –是的,确实如此! Run
npx eslint. --ext.js
运行
npx eslint. --ext.js
npx eslint. --ext.js
. npx eslint. --ext.js
。
If you get at least one warning or error, then you know you should see it in VS Code as well.如果您收到至少一个警告或错误,那么您知道您也应该在 VS Code 中看到它。
(Section 3 below – check out the gotchas .) (下面的第 3 部分——检查陷阱。)
there is no
.eslintrc.*
file in the project root.项目根目录中没有
.eslintrc.*
文件。
– Be glad there isn't! –很高兴没有! And don't put one there either!
也不要放在那里!
(Section 5 below.) (下文第 5 节。)
In order to be able to answer your questions, I created an App: 2为了能够回答您的问题,我创建了一个应用程序: 2
npx create-react-app how-is-eslint-integrated-into-create-react-app
I then deleted all files in the src
subdirectory, and inserted my own versions of App.js
, App.css
, index.js
, index.css
, along with a components
subdirectory that contains a Button
component.然后,我删除了
src
子目录中的所有文件,并插入了我自己的App.js
、 App.css
、 index.js
、 index.css
版本,以及包含Button
组件的components
子目录。
In package.json
I deleted a few irrelevant lines, such as "version": "0.1.0",
在
package.json
我删除了一些不相关的行,比如"version": "0.1.0",
and "private": true,
and the production
attribute under browserslist
. and
"private": true,
以及browserslist
下的production
属性。
The resulting package.json
:结果
package.json
:
{
"name": "how-is-eslint-integrated-into-create-react-app",
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"development": [
"last 1 chrome version"
]
}
}
When you wrote your question a little more than two years ago, the eslintConfig
attribute was两年多前您写问题时,
eslintConfig
属性是
,
"eslintConfig": {
"extends": "react-app"
}
whereas nowadays, it's而如今,它是
,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
I will assume that this change makes no difference for the issues and questions you bring up我假设此更改对您提出的问题没有影响
(unless someone proves me wrong). (除非有人证明我错了)。
Another difference over the past two years – apart from the obvious changes in version numbering – is the added web-vitals
attribute:过去两年的另一个区别——除了版本编号的明显变化——是添加的
web-vitals
属性:
,
"web-vitals": "^2.1.4"
which is a package for measuring performance metrics in JavaScript. 3这是一个 package,用于测量 JavaScript 中的性能指标。3
Thus, web-vitals
is irrelevant for your questions.因此,
web-vitals
与您的问题无关。
You can download the resulting zip file containing all necessary project files .您可以下载生成的zip 文件,其中包含所有必需的项目文件。
Once downloaded – from the root of the project (directory Q59633005
) – run npm install
.下载后 - 从项目的根目录(目录
Q59633005
) - 运行npm install
。
Expect it to take anytime between 4 and 11 minutes to complete.预计需要 4 到 11 分钟才能完成。
Next run npm start
.接下来运行
npm start
。
Expect your default web browser to open and – after hitting F12 – display: 4期望您的默认 web 浏览器打开并且 - 在按下F12之后 - 显示: 4
Now close the server from the terminal by hitting Ctrl + C .现在通过点击Ctrl + C从终端关闭服务器。
Take a look inside App.js
.看看
App.js
内部。 The contents are:内容是:
// App.js
import React, { useCallback, useState } from 'react';
import "./App.css";
import Button from "./components/UI/Button/Button"
function App(unUsedArgument) {
const [unUsedVariable, setShowParagraph] = useState(true);
const showParagraphFcn = useCallback(() => {
setShowParagraph((prevToggle) => !prevToggle);
},[]);
console.log("App RUNNING");
return (
<div className="app">
<h1>Hi there!</h1>
<Button onClick={showParagraphFcn}>A Button</Button>
</div>
);
}
export default App;
I now have project to help answer your questions.我现在有项目可以帮助回答您的问题。
VS Code does not seem to recognize that there is any kind of linter present/configured.
VS Code 似乎无法识别存在/配置的任何类型的 linter。 This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to
package.json
.这并不奇怪,因为 ESLint 不是我刚刚生成的 React 项目的依赖项——至少根据
package.json
。
The npx create-react-app...
does indeed install ESLint . npx
npx create-react-app...
确实安装了 ESLint 。
ESLint is deeply buried in the dependency tree of the react-scripts
package. ESLint 深埋在
react-scripts
package 的依赖树中。
The top node for ESLint in react-scripts
is eslint-config-react-app
. react-scripts
中 ESLint 的顶级节点是eslint-config-react-app
。 5 5个
Some basic configuration is also part of the deal.一些基本配置也是交易的一部分。 So ESLint does work out of the box.
所以 ESLint确实开箱即用。
VS Code shows a warning for unUsedVariable
on line 7 of App.js
VS Code 在 App.js 的第 7 行显示
unUsedVariable
的App.js
(but for some reason not for unUsedArgument
on line 6). (但出于某种原因,第 6 行的
unUsedArgument
不是)。
In VS Code, expect to see:在 VS Code 中,期望看到:
How do I expand [ESLint in a Create React App]?
如何扩展 [Create React App 中的 ESLint]?
To expand ESLint, you need to add rules
under eslintConfig
in package.json
, exactly as you have already suggested in your question.要扩展ESLint,您需要在
eslintConfig
中的package.json
下添加rules
,正如您在问题中已经建议的那样。
To try your example, replace要尝试您的示例,请替换
,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
with和
,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"semi": [
"error",
"always"
],
"quotes": [
"error",
"double"
]
}
}
After restarting VS Code, it still shows the warning for unUsedVariable
on line 7, but now also an error on line 2 for having single quotes instead of double quotes, and an error on line 4 for the missing semicolon at the end of the line.重新启动 VS Code 后,它仍然在第 7 行显示
unUsedVariable
的警告,但现在在第 2 行显示单引号而不是双引号的错误,并在第 4 行显示行尾缺少分号的错误。
This shows that you have already correctly answered how to expand Create React App.这说明你已经正确回答了如何扩展Create React App。
For another example, consider looking at the package.json
|再举一个例子,考虑查看
package.json
| eslintConfig
of this answer .这个答案的
eslintConfig
。
Still don't see the errors and warnings as in the screenshot above?仍然没有看到上面屏幕截图中的错误和警告? It might not work, I know.
这可能行不通,我知道。
Three gotchas to check:要检查的三个问题:
package.json
, you must close and restart VS Code.package.json
进行任何更改后,您必须关闭并重新启动 VS Code。"eslint.nodePath": "C:\\Program Files\\nodejs",
to settings.json
in VS Code ."eslint.nodePath": "C:\\Program Files\\nodejs",
到 VS Code 中的settings.json
。For starters: How do I run it?
对于初学者:我如何运行它?
Answer: 6答案: 6
npx eslint . --ext .js
The first four lines of the response:响应的前四行:
C:\stackexchange\stackoverflow\linting\eslint\Q59633005\src\App.js
2:46 error Strings must use doublequote quotes
4:51 error Missing semicolon semi
7:10 warning 'unUsedVariable' is assigned a value but never used no-unused-vars
– In less than 10 seconds, you get the same information about errors and warnings as in VS Code. – 在不到 10 秒的时间内,您将获得与 VS Code 中相同的错误和警告信息。
If you don't like hard-to-debug errors such as如果您不喜欢难以调试的错误,例如
Parsing error: The keyword 'import' is reserved解析错误:关键字'import'被保留
then don't use any .eslintrc.*
files at all.然后根本不要使用任何
.eslintrc.*
文件。 1 1个
In my experience, you can put all ESLint configurations under eslintConfig
in package.json
as described in Section 2 above.根据我的经验,您可以将所有 ESLint 配置放在
eslintConfig
中的package.json
下,如上文第 2 节所述。 – You won't need any .eslintrc.*
files. –您不需要任何
.eslintrc.*
文件。
react-scripts
react-scripts
依赖于 ESLintpackage.json
– another eslintConfig
examplepackage.json
– 另一个eslintConfig
示例"eslint.nodePath": "C:\\Program Files\\nodejs",
to settings.json
"eslint.nodePath": "C:\\Program Files\\nodejs",
添加到settings.json
1 If you want to know why , compare this long answer with this short answer . 1如果您想知道原因,请将这个长答案与这个简短答案进行比较。
2 I'm on Windows 10, but I expect all the commands provided here to work just as fine on both Linux and macOS – except where otherwise stated. 2我在 Windows 10,但我希望此处提供的所有命令在 Linux 和 macOS 上都能正常工作——除非另有说明。
3 You can find that out by running npm ll
. 3您可以通过运行
npm ll
找到它。
4 I use Google Chrome Version 98.0.4758.102, 64-bit. 4我使用 Google Chrome 版本 98.0.4758.102,64 位。 Running on Windows 10.
在 Windows 10 上运行。
5 I got this information from NPMGraph - Visualize NPM Module Dependencies . 5我从NPMGraph - Visualize NPM Module Dependencies获得了这些信息。
6 Alternatively, use the first line below if you are on Microsoft Windows (backslashes). 6或者,如果您使用的是 Microsoft Windows(反斜杠),请使用下面的第一行。
Use the second line if you are on Linux or macOS (forward slashes).如果您使用的是 Linux 或 macOS(正斜杠),请使用第二行。
node*modules\.bin\eslint. --ext.js node*modules/.bin/eslint. --ext.js
your question makes perfect sense.你的问题很有道理。 I found that this works:
我发现这有效:
I did not have a problem with integrating ESLint to VS Code.我没有将 ESLint 集成到 VS Code 的问题。 After installing VS Code extension for ESLint, I automatically see the warnings/errors in VS Code under Problems.
为 ESLint 安装 VS Code 扩展后,我会自动在问题下看到 VS Code 中的警告/错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.