添加plugin:@typescript-eslint/recommended-requiring-type-checking后，提示tsconfig中未包含该文件

Question

我用

npx create-react-app my-app --template typescript 

创建一个项目，然后我向其添加打字稿类型检查，但我的 App.tsx 报告以下错误：

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/../../../../my-app-ts/src/App.tsx` using `parserOptions.project`: <tsconfigRootDir>/tsconfig .json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the TypeScript ESLint docs for more info: https://typescript-eslint.io/docs/linting/troubleshooting##i-get-errors-telling-me-eslint-was-configured-to-run--however-that -tsconfig-does-not--none-of-those-tsconfigs-include-this-fileeslint

我的 .eslintrc.js 文件：

module.exports = {
  extends: [
    "react-app",
    "react-app/jest",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
  ],
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: "./tsconfig.json",
  },
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  root: true,
};

我的 tsconfig.json：

{
  "baseUrl": ".",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src/**/*.tsx",
    "src/**/*.ts"
  ]
}

我的目录树：

/mnt/data0/work/my-app-ts
├── README.md
├── package.json
├── public
|  ├── favicon.ico
|  ├── index.html
|  ├── logo192.png
|  ├── logo512.png
|  ├── manifest.json
|  └── robots.txt
├── src
|  ├── App.css
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── logo.svg
|  ├── react-app-env.d.ts
|  ├── reportWebVitals.ts
|  └── setupTests.ts
├── tsconfig.json
└── yarn.lock

看起来 src/App.tsx 已经在包含范围内，我不知道为什么这不起作用，我的项目完全由 create-react-app 创建，没有任何其他修改。

如果您有好的想法，请回复我，我将非常感激。

Answer 1

解决方案很可能是以下 1-4 条：

• 更新到所有

  @typescript-eslint/*

  软件包的最新 >=6.x 版本
• 将

  parserOptions.project

  从

  "./tsconfig.json"

  更改为

  true

• 确保您进行文件检查的每个包都有相应的 ESLint 配置和 TSConfig

  package.json

• 确保您的 TSConfig 文件已启用

  compilerOptions.jsx

  - 并且通常可以包含

  src/*.tsx

  文件

前两点是因为该错误消息在

@typescript-eslint/parser

的更高版本中得到了改进 -https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-the-file-must-添加了“被包含在至少一个提供的项目中”和

project: true

，以实现更强大的 TSConfig 查找。

最后两点是因为在查看源文件时出现此错误的唯一方法是 TypeScript 认为不应包含该文件。如果 TypeScript 没有被告知应该识别 JSX 文件，则

.tsx

 文件可能会发生这种情况。如果您不小心设置了 

"exclude": ["src"]

 或 

"include": ["some-typo"]

 等内容，也可能会发生这种情况。