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 中，这与使用like so手动添加到项目中的方式不同。 这不仅可以从发布关于让两者一起工作的努力的人数众多中看出。 这也很明显...

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

所以：我 go 如何在 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

要扩展顶部评论的答案：

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

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

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

react-scripts将eslint作为依赖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 .原因eslint . 在您的终端中不起作用，但使用

    "lint": "eslint .",

然后npm run lint可以。 （尽管您可以使用命令eslint --ignore-path .gitignore .由于当前的错误）。

同样，eslint 配置安装在react-scripts ，然后在默认项目输出的自己的package.json引用。

Answer 3

每个 Create React App 都通过react-scripts依赖于 ESLint

我相信我已经在以下部分中回答了您的大部分问题。
这是一个摘要。

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

– 是的，ESLint 已安装和配置。
（下文第 1 节。）

如何正确启用和扩展它？

– 它已经启用。 您完全按照您在问题中已经建议的那样扩展它，除了您不需要更改extends属性下的任何内容。
（下文第 1 和第 2 节。）

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

–不，不是。
再次安装 ESLint ( npm install eslint --save-dev )会添加
"devDependencies": {
"eslint": "^7.32.0"
}
至package.json 。 但仅此而已。
没有实际意义，因为"eslint": "^7.32.0"已经通过react-scripts安装为依赖项。

我建议不要运行npm init @eslint/config ，这是一个创建.eslintrc.*配置文件的命令。 如果您确实运行此命令，请考虑将.eslintrc.*的所有内容移动到package.json下的eslintConfig 。
然后删除有问题的.eslintrc.*文件。 它可能会为你省去很多痛苦。 ^1个
（下文第 1 和第 5 节。）

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

–是的，你可以！
这是npx eslint. --ext.js npx eslint. --ext.js
（下文第 4 节。）

ESLint 似乎不依赖于package.json [?]

–是的，是的！
这种依赖是间接的，因为react-scripts依赖于 ESLint 和许多其他包。
（下文第 1 节。）

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

–是的，确实如此！ 运行npx eslint. --ext.js npx eslint. --ext.js 。
如果您收到至少一个警告或错误，那么您知道您也应该在 VS Code 中看到它。
（下面的第 3 部分——检查陷阱。）

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

–很高兴没有！ 也不要放在那里！
（下文第 5 节。）

0.先决条件

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

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

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

在package.json我删除了一些不相关的行，比如"version": "0.1.0",
and "private": true,以及browserslist下的production属性。

结果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"
    ]
  }
}

两年多前您写问题时， eslintConfig属性是

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

而如今，它是

,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

我假设此更改对您提出的问题没有影响
（除非有人证明我错了）。

过去两年的另一个区别——除了版本编号的明显变化——是添加的web-vitals属性：

,
    "web-vitals": "^2.1.4"

这是一个 package，用于测量 JavaScript 中的性能指标^。3
因此， web-vitals与您的问题无关。

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

下载后 - 从项目的根目录（目录Q59633005 ） - 运行npm install 。
预计需要 4 到 11 分钟才能完成。

接下来运行npm start 。
期望您的默认 web 浏览器打开并且 - 在按下F12之后 - 显示： ⁴

现在通过点击Ctrl + C从终端关闭服务器。

看看App.js内部。 内容是：

// 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;

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

1. Visual Studio Code 中的 ESLint

VS Code 似乎无法识别存在/配置的任何类型的 linter。 这并不奇怪，因为 ESLint 不是我刚刚生成的 React 项目的依赖项——至少根据package.json 。

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

ESLint 深埋在react-scripts package 的依赖树中。
react-scripts中 ESLint 的顶级节点是eslint-config-react-app 。 ^5个

一些基本配置也是交易的一部分。 所以 ESLint确实开箱即用。

VS Code 在 App.js 的第 7 行显示unUsedVariable的App.js
（但出于某种原因，第 6 行的unUsedArgument不是）。

在 VS Code 中，期望看到：

2.如何扩展ESLint

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

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

要尝试您的示例，请替换

,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

和

,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "semi": [
        "error",
        "always"
      ],
      "quotes": [
        "error",
        "double"
      ]
    }
  }

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

这说明你已经正确回答了如何扩展Create React App。

再举一个例子，考虑查看package.json | 这个答案的eslintConfig 。

---

3. VS Code 的一些问题

仍然没有看到上面屏幕截图中的错误和警告？ 这可能行不通，我知道。

要检查的三个问题：

• 您必须安装VS Code ESLint 扩展。
• 对package.json进行任何更改后，您必须关闭并重新启动 VS Code。
  然后等待至少60-100 秒（甚至 2 分钟），然后再断定它不起作用。
• 添加"eslint.nodePath": "C:\\Program Files\\nodejs",到 VS Code 中的settings.json 。

4. 一种更快地检查 ESLint 是否有效的方法

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

答案： ⁶

npx eslint . --ext .js

响应的前四行：

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

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

5. 一句警告

如果您不喜欢难以调试的错误，例如
解析错误：关键字'import'被保留
然后根本不要使用任何.eslintrc.*文件。 ^1个

根据我的经验，您可以将所有 ESLint 配置放在eslintConfig中的package.json下，如上文第 2 节所述。 –您不需要任何.eslintrc.*文件。

参考

• 每个 Create React App 都通过react-scripts依赖于 ESLint
• 解析错误的长答案：保留关键字“导入”
• 解析错误的简短回答：保留关键字“导入”
• Zip 包含所需项目文件的文件
• NPMGraph - 可视化 NPM 模块依赖关系
• 帖子包含package.json – 另一个eslintConfig示例
• VS 代码 ESLint 扩展
• 在 VS Code 中，将"eslint.nodePath": "C:\\Program Files\\nodejs",添加到settings.json
• 解析错误：关键字'import'被保留

---

¹如果您想知道原因，请将这个长答案与这个简短答案进行比较。

²我在 Windows 10，但我希望此处提供的所有命令在 Linux 和 macOS 上都能正常工作——除非另有说明。

³您可以通过运行npm ll找到它。

⁴我使用 Google Chrome 版本 98.0.4758.102，64 位。 在 Windows 10 上运行。

⁵我从NPMGraph - Visualize NPM Module Dependencies获得了这些信息。

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

 node*modules\.bin\eslint. --ext.js node*modules/.bin/eslint. --ext.js

Answer 4

你的问题很有道理。 我发现这有效：

• 在 VS Code 中使用“npx eslint”（显示所有选项）或“npx eslint”运行 ESLint。
• 将脚本添加到 package.json "lint": "eslint ." 然后使用'npm run lint'

我没有将 ESLint 集成到 VS Code 的问题。 为 ESLint 安装 VS Code 扩展后，我会自动在问题下看到 VS Code 中的警告/错误。