javascript - ESLint 如何集成到 Create React App 中？

问题描述

当我运行时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。

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

标签： javascriptreactjsvisual-studio-codecreate-react-appeslint

解决方案

是的，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 真的必须以“use”开头吗？” .

javascript - ESLint 如何集成到 Create React App 中？

问题描述

解决方案

推荐阅读