javascript - 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 配置注入(inject)活力，所以现在我有了这个:

"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 显然以不同的方式集成到 Create React App 中，而不是使用 like so 手动添加到项目中。 。这不仅体现在有多少人发帖讲述他们为让两人合作而付出的努力。这也很明显...

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

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

Answer 1

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

How do I enable and extend it correctly?

您可以查看如何扩展 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?

您需要integrate it with your IDE .

How do I run it?

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

<小时/>

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

...one cannot run the eslint command in the project root.

你可以:

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

...ESLint does not seem to be a dependency within package.json.

为什么会这样呢？这就是您使用 CRA 这样的启动器的原因。这是一种内在的依赖，你不需要担心，那是 CRA 的工作。

...VS Code doesn't pick up that there is ESLint present.

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

...there is no .eslintrc.* file in the project root.

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

<小时/>

了解eslint到底是什么以及我们如何使用它React开发非常有用，查看相关问题"Do React hooks really have to start with “use”?" .