ESLint 如何集成到 Create React App 中？

Question

当我运行 时npx create-react-app ...，正在为我创建一个简单的 React 项目。然后当我查看 时package.json，似乎有一些 ESLint 存在的证据，因为有这样的：

"eslintConfig": {
  "extends": "react-app"
},

然而，每当我将 ESLint 作为开发依赖项安装并配置它时——就像我通常所做的那样——，VS Code 似乎会选择它。在这种情况下，VS Code 似乎没有意识到存在/配置了任何类型的 linter。这并不奇怪，因为 ESLint 不是我刚刚生成的 React 项目的依赖项——至少不是根据package.json. 当我尝试eslint .在项目的根目录中运行时，它显示“找不到命令”。

我试图通过扩展它来为这个 ESLint 配置注入活力，所以现在我有了：

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

这没有任何改变。我以一种我知道它违反上述配置的方式操作源代码，但是，我没有收到任何不法行为的信号。

这让我想到一个简单的问题： 生成的项目是否create-react-app带有某种 ESLint 配置，如果是，我该如何正确启用和扩展它？

当我提到在搜索“create react app eslint”时出现的排名第一的谷歌点击- 我显然已经阅读过 - 让我澄清我的意思：

ESLint 显然是以一种不同的方式集成到 Create React App 中，而不是像这样手动将其添加到项目中。这不仅可以从大量发布他们让两者合作的努力的人中看出。这也很明显，因为...

• ...不能eslint在项目根目录中运行该命令。
• ...ESLint 似乎不是package.json.
• ...VS Code 没有发现存在 ESLint。
• ....eslintrc.*项目根目录中没有文件。
• ...等等。

那么：我如何在 Create React App 的上下文中使用 ESLint？对于初学者：我如何运行它？我如何扩展它？以及为什么 VS Code 没有发现它——即使它通常会注意到 ESLint 的存在？

Answer 1

是的，create-react-app带有eslint配置。

如何正确启用和扩展它？

您可以在此处查看如何扩展它。

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

如何启用它？

您需要将它与您的 IDE 集成。

我如何运行它？

集成后，eslint 服务器将在后台运行，并将为您的 IDE 启用 linting（有时需要重新启动 IDE）。

我在运行后检查了您的所有声明npx create-react-app example：

...不能在项目根目录中运行 eslint 命令。

你可以：

eslint 作为项目依赖项的一部分安装，仅通过全局运行 eslint ( eslint [cmd]) 您需要确保它全局安装（不推荐）。

...ESLint 似乎不是 package.json 中的依赖项。

为什么应该这样？这就是您使用像 CRA 这样的启动器的原因。这是一种内在的依赖，你不必担心，这是 CRA 的工作。

...VS Code 没有发现存在 ESLint。

确实如此，请检查OUTPUT选项卡并查找ESLint以查看服务器的输出。

...项目根目录中没有 .eslintrc.* 文件。

您从 CRA 获得默认配置（它对您隐藏以专注于编码）。如果您想覆盖它，请添加此类文件（您也可以扩展它，请查看文档）。

了解 eslint 究竟是什么以及我们如何使用它进行 React 开发非常有用，请查看相关问题“React hooks 真的必须从“使用”开始吗？.

Answer 2

每个 Create React App 都依赖于 ESLintreact-scripts

\n

我已经回答了你的大部分问题。这是一个总结。
\n（更多详细信息，请参阅下面的第 1-6 节。）

\n

\n

生成的项目是否create-react-app带有某种 ESLint 配置[？]

\n

\n

\xe2\x80\x93是的，ESLint 已安装并配置。
\n（下文第 1、4、6 节。）

\n

\n

如何正确启用和扩展它？

\n

\n

\xe2\x80\x93已启用。您完全按照问题中的建议展开它，只是您不需要更改该extends属性下的任何内容。
\n（下文第 1、4、6 节。）

\n

\n

显然，ESLint 集成到 Create React App 中的方式与手动添加到项目中的方式不同
\n[使用npm install eslint --save-dev和npm init @eslint/config？]

\n

\n

\xe2\x80\x93是和否。
\n再次安装 ESLint ( npm install eslint --save-dev)确实会将
\n\xc2\xa0 "devDependencies": {
\n\xc2\xa0 \xc2\xa0 "eslint": "^7.32.0"
\n\xc2\xa0 }
\ n 添加到package.json。\n但这没有任何区别，因为"eslint": "^7.32.0"已经安装为通过 的依赖关系react-scripts。
\n该react-scripts软件包包含eslint-config-react-app单独安装 ESLint 无法获得的软件包。\n该软件包专门针对ReactJS应用程序。\n例如，
它不能用于React Native应用程序。
\n（下文第 1、4、6 节。）

\n

\n

无法eslint在项目根目录中运行该命令[?]

\n

\n

\xe2\x80\x93是的，你可以！ ¹
\n这是npx eslint **/*.js
\n（下面第 2 节。）

\n

\n

ESLint 似乎不是package.json[?]内的依赖项

\n

\n

\xe2\x80\x93是的，是的！
\n依赖关系是间接的，react-scripts依赖于 ESLint 以及其他包。
\n（下面第 1 节。）

\n

\n

VS Code 没有发现存在 ESLint [?]

\n

\n

\xe2\x80\x93是的，确实如此！跑步npx eslint **/*.js。
\n如果您至少收到一个警告或错误，那么您就知道您也应该在 VS Code 中看到它。
\n（\xe2\x80\x93 下面的第 3 节和第 5 节查看陷阱。）

\n

\n

.eslintrc.*项目根目录中没有文件。

\n

\n

\xe2\x80\x93如果您eslintConfig在 中有一个属性package.json，那么您不需要 ESLint 的任何额外配置文件。
\n（下面第 6 节。）

\n

0. 先决条件

\n

为了能够回答您的问题，我创建了一个应用程序：²

\n

npx create-react-app how-is-eslint-integrated-into-create-react-app\n

\n

然后，我删除了子目录中的所有文件src，并插入了我自己的App.js、App.css、index.js和版本index.css以及components包含组件的子目录Button。

\n

在package.json我删除了一些不相关的行，例如"version": "0.1.0",
\nand"private": true,和production下的属性browserslist。

\n

package.json:

\n

npx create-react-app how-is-eslint-integrated-into-create-react-app\n

\n

您可以下载包含所有必需项目文件的生成的 zip 文件。

\n

从项目根目录（目录59633005）\xe2\x80\x93下载\xe2\x80\x93后运行npm install。
\n预计需要 1 到 11 分钟之间的任何时间才能完成。

\n

下次运行npm start。
\n按 \xe2\x80\x93 后，您的默认 Web 浏览器将打开并F12\xe2\x80\x93 显示：

\n

\n

如您所见，控制台中 \xe2\x80\x93 没有错误，也没有警告。\n现在按+
从终端关闭服务器。CtrlC

\n

看看里面App.js。内容是：

\n

{\n  "name": "how-is-eslint-integrated-into-create-react-app",\n  "dependencies": {\n    "@testing-library/jest-dom": "^6.1.4",\n    "@testing-library/react": "^14.1.0",\n    "@testing-library/user-event": "^14.5.1",\n    "react": "^18.2.0",\n    "react-dom": "^18.2.0",\n    "react-scripts": "5.0.1",\n    "web-vitals": "^3.5.0"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n  "eslintConfig": {\n    "extends": ["react-app", "react-app/jest"]\n  },\n  "browserslist": {\n    "development": ["last 1 chrome version"]\n  },\n  "overrides":{\n    "@babel/traverse": "^7.23.2",\n    "nth-check": "^2.1.1",\n    "postcss": "^8.4.31"\n  }\n}\n

\n

我现在有一个工作项目可以帮助回答您的问题。

\n

react-scripts1. ESLint是in的依赖package.json

\n

\n

VS Code 似乎没有识别出存在/配置了任何类型的 linter。\n这并不奇怪，因为 ESLint 不是我刚刚生成的 React 项目的依赖项 [\xe2\x80\xa6]

\n

\n

确实npx create-react-app ... 安装了 ESLint。

\n

ESLint 深深地埋藏在react-scripts包的依赖树中。
\nESLint 的顶部节点react-scripts是eslint-config-react-app。³

\n

一些基本配置随之而来。所以 ESLint应该开箱即用。

\n

2.在命令行\xe2\x80\x93中运行ESLint是检查其是否有效的最快方法

\n

\n

对于初学者：我如何运行它？

\n

\n

答案：⁴

\n

npx eslint **/*.js\n

\n

\n

文字警告：

\n

7:10 warning \'unUsedVariable\' is assigned a value but never used  no-unused-vars\n

\n

\xe2\x80\x93 在不到 10 秒的时间内，您将获得与 VS Code 中相同的错误和警告信息。

\n

3. Visual Studio Code 中的 ESLint

\n

unUsedVariableVS Code在 \n 的第 7 行显示警告App.js
（但由于某种原因不在unUsedArgument第 6 行显示警告）。

\n

在 VS Code 中，预计会看到：

\n

\n

4.如何扩展ESLint的配置

\n

\n

如何扩展 [Create React App 中的 ESLint]？

\n

\n

要扩展ESLint，您需要在inrules下添加例如，正如您在问题中已经建议的那样。eslintConfigpackage.json

\n

要尝试您的示例，请替换

\n

// App.js\nimport React, { useCallback, useState } from \'react\';\nimport "./App.css";\nimport Button from "./components/UI/Button/Button"\n\nfunction App(unUsedArgument) {\n  const [unUsedVariable, setShowParagraph] = useState(true);\n  const showParagraphFcn = useCallback(() => {\n    setShowParagraph((prevToggle) => !prevToggle);\n  },[]);\n  console.log("App RUNNING");\n  return (\n    <div className="app">\n      <h1>Hi there!</h1>\n      <Button onClick={showParagraphFcn}>A Button</Button>\n    </div>\n  );\n}\nexport default App;\n

\n

和

\n

npx eslint **/*.js\n

\n

重新启动 VS Code 后，它仍然在第 7 行显示警告unUsedVariable，但现在在第 2 行也显示错误，因为使用单引号而不是双引号，并且在第 4 行显示错误，因为行尾缺少分号。

\n

\n

这表明您已经正确扩展了 Create React App。

\n

这是package.json有关如何在|中添加规则的另一个示例。eslintConfig。

\n

5. VS Code 的一些问题

\n

仍然看不到 VS Code 中的错误和警告？

\n

\n
• 您必须安装VS Code ESLint 扩展。
\n
• 您本地安装的 Create React App 会在本地安装 ESLint 。\n不建议全局安装 ESLint。\n如果您这样做，请运行npm uninstall eslint --global。
\n
• 对中的属性进行任何更改后，必须关闭并重新启动 VS Code。\n然后等待至少60\xe2\x80\x93100 秒（甚至 2 分钟），然后才得出结论它不起作用。"eslintConfig"package.json
  
\n

\n

6.ESLint配置在package.json

\n

默认情况下，每个 Create React App 都会在eslintConfig属性下配置 ESLint，package.json如上面第 4 节所述。

\n

\xe2\x80\x93您不需要任何 ESLint 配置文件。

\n

您可以运行npm init @eslint/config（或等效的npx eslint --init），这是一个创建.eslintrc.*配置文件的命令（其中*代表js或json）。
\n如果运行此命令，您可能还想将 的所有内容移动.eslintrc.*到package.json下eslintConfig，然后删除该（可能有问题的）.eslintrc.*文件。⁵

\n

参考

\n

\n
• 每个 Create React App 都依赖于 ESLintreact-scripts
\n
• 套餐eslint-config-react-app​
\n
• React 与 React Native：选择哪一个以及为什么？
\n
• React Native，入门
\n
• npx eslint **/*.js适用于“平面配置”
\n
• 包含所需项目文件的 Zip 文件
\n
• npmgraph - 可视化 npm 模块依赖关系
\n
• package.json包含\xe2\x80\x93的帖子另一个eslintConfig例子
\n
• VS Code ESLint 扩展
\n
• 不建议全局安装 ESLint
\n
• ESLint\ 的新配置系统 \xe2\x80\x93 前进的道路
\n

\n\n \n

¹ \n在这个答案的原始版本中，我建议了一个稍微不同的命令，但对于新文件（平面配置）以及旧文件npx eslint **/*.js都适用eslint.config.js.eslintrc.*。

\n

² \n我使用的是 Windows 10，但我希望此处提供的所有命令在 Linux 和 macOS \xe2\x80\x93 上都能正常工作，除非另有说明。

\n

^{3 \n我从}npmgraph - 可视化 npm 模块依赖关系中获得了此信息。

\n

⁴ \n或者，如果您使用的是 Microsoft Windows，请使用下面的第一行（反斜杠）。
\n如果您使用的是 Linux 或 macOS，请使用第二行（正斜杠）。

\n

node_modules\\.bin\\eslint **/*.js\nnode_modules/.bin/eslint **/*.js\n

\n

⁵ \n在撰写本文时，该命令npm init @eslint/config尚无法以新的“平面配置”样式生成配置。

\n \n

Answer 3

要扩展顶部评论的答案：

...ESLint 似乎不是 package.json 中的依赖项。

为什么应该这样？这就是您使用像 CRA 这样的启动器的原因。这是一种内在的依赖，你不必担心，这是 CRA 的工作。

使用 create-react-app 创建的项目将react-scripts作为依赖项。

react-scripts已eslint作为依赖项安装，如react-scripts package.json 所示。

您可以通过npm ls <package>在项目根目录中运行来查看是否安装了包（以及安装在何处）。

npm ls eslint 显示：

??? react-scripts@4.0.3
  ??? eslint@7.21.0 

这显示了我们通过在 GitHub 中的 react-scripts 中手动调查的依赖关系树。

所以 - 用 create-react-app 制作的项目确实带有 eslint。因为它是一个依赖项，而不是全局安装的东西，所以它必须使用 npm 脚本运行。

这就是为什么eslint .在您的终端中运行不起作用，但使用

    "lint": "eslint .",

然后呢npm run lint。（尽管您可能会eslint --ignore-path .gitignore .因为当前的错误而发出命令）。

类似地，eslint 配置安装在 中react-scripts，然后在默认项目输出的自己的package.json.