ESLint 如何集成到 Create React App 中？答案

【问题标题】：How is ESLint integrated into Create React App?ESLint 如何集成到 Create React App 中？
【发布时间】：2020-04-25 05:32:13
【问题描述】：

当我运行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 配置，如果有，如何正确启用和扩展它？

当我被提到 the number one Google hit that comes up when searching "create react app eslint" 时——我显然已经阅读过——让我澄清一下我的意思：

显然，ESLint 以不同于使用 like so 手动添加到项目中的方式集成到 Create React App 中。这不仅体现在发布关于他们为让两者合作而努力的人数的绝对数量上。这也很明显......

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

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

【问题讨论】：

这似乎是一个 vscode linter 配置问题。我会查看/使用包设置。我会自动在 Atom 中看到警告（使用我已经设置的正确配置的 linter 设置）。如果您想了解 CRA 在幕后做了什么，您可以运行 yarn eject。此外，eslint SOMETHING 仅在您全局安装了 eslint 时才有效。试试yarn eslint src 或npx eslint src。如果你对使用 CRA 自定义 ESLint 配置感兴趣，请查看我的博文：medium.com/hackernoon/a-simple-linter-setup-finally-d908877fa09

标签： javascript reactjs visual-studio-code create-react-app eslint

【解决方案1】：

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

如何正确启用和扩展它？

您可以查看如何扩展它here。

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

如何启用它？

你需要integrate it with your 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 开发非常有用，请查看相关问题 "Do React hooks really have to start with “use”?"。

【讨论】：

需要通过settings.json将其与扩展和设置集成
如果您在 vscode 中以 DEBUG 模式打开控制台，您可以查看eslint 选项卡查看它的日志（修复错误后您将启用 linting）
我认为你很难将它与 vscode 集成，为什么要投反对票？
可悲的是，你写的东西都没有帮助我的情况。我没有yarn，所以我仍然无法运行eslint，并且按照您所说的方式创建了几个新项目后，在VS Code 中打开这些项目仍然会导致一个空的“输出”控制台。不过，感谢您的努力。
无论我在eslintConfig 中添加了什么，我都无法更改内置规则。你真的能做到吗？

【解决方案2】：

你的问题很有道理。我发现这行得通：

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

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

【讨论】：

【解决方案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 会。（尽管由于current bug，您可以使用命令eslint --ignore-path .gitignore .）。

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

【讨论】：