ESLint 如何集成到 Create React App 中？

javascript eslint reactjs visual-studio-code create-react-app

2022-08-30 05:27:18

当我运行时，正在为我创建一个基本的 React 项目。当我偷看时，似乎有一些证据表明ESLint存在，因为有这个：npx create-react-app ...package.json

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

但是，每当我将 ESLint 安装为开发依赖项并对其进行配置时，就像我通常--, VS Code 似乎都会选择它。在这种情况下，VS Code 似乎没有意识到存在/配置了任何类型的 linter。这并不奇怪，因为 ESLint 不是我刚刚生成的 React 项目的依赖项 - 至少不是根据 .当我尝试在项目的根目录中运行时，它说“找不到命令”。package.jsoneslint .

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

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

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

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

由于我指的是搜索“创建react应用程序eslint”时出现的Google点击量 - 我显然已经阅读了--,让我澄清我的意思：

ESLint 显然以一种不同于手动将其添加到项目中的方式集成到 Create React App 中。这不仅可以从发布他们为让两者一起工作而挣扎的人数中看出。这也是显而易见的...

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

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

答案 1

是的，附带配置。create-react-appeslint

如何正确启用和扩展它？

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

{
  "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。

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

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

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

了解eslint到底是什么以及我们如何使用它 React开发非常有用，请查看相关问题“React钩子真的必须从”use“开始吗？

答案 2

要扩展顶部评论的答案：

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

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

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

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

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

npm ls eslint显示：

└─┬ react-scripts@4.0.3
  └── eslint@7.21.0

这显示了我们通过在 GitHub 中查看 react 脚本来手动调查的依赖关系树。

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

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

    "lint": "eslint .",

然后就这样做了。（尽管由于当前的错误，您可以发出命令）。npm run linteslint --ignore-path .gitignore .

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