关于“create-react-app --template typescript”如何与 typescript-eslint 连接的困惑

Question

我使用npx create-react-app my-app --template typescript创建了一个反应项目。 而且我发现默认情况下已经启用了typescript-eslint 。

我检查了 package.json 内部的package.json配置

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

我认为为了启用typescript-eslint ，您需要在package.json或.eslintrc中使用"extends": ["plugin:@typescript-eslint/recommended" 。 但在这种情况下，我在代码库中找不到其中任何一个。 我想知道 typescript 的 eslint 是如何启用的？

Answer 1

CRA 旨在成为设置您的 React 应用程序的一站式商店。 这包括构建配置、文件夹结构以及使用最佳实践开发 React 应用程序所需的一切。

虽然没有真正明确列出任何地方，但 CRA 使用eslint-config-react-app配置提供了预配置的 linting 体验。

在他们的主页上，他们提到：

在后台，我们使用 webpack、Babel、 ESLint和其他令人惊叹的项目来为您的应用程序提供动力。 （强调我的）

在 IDE 体验之类的地方也提到了它，但是以“你应该已经知道这是一件事”的方式： https://create-react-app.dev/docs/setting-up-your-editor/#在编辑器中显示 lint 输出

---

对于 typescript 项目，CRA 配置包括来自@typescript-eslint项目的工具，因为它是检查 typescript 代码的标准。

如果不使用这个项目，他们会在尝试 lint typescript 代码库时遇到许多问题（最大的问题是它根本不起作用）。

上述文档包含有关如何根据需要进一步配置 linting 体验的信息。