添加plugin:@typescript-eslint类型检查插件后TS文件不被TSConfig识别

项目创建命令 #

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

报错信息 #

Parsing error: ESLint was configured to run on <tsconfigRootDir>/../../../../my-app-ts/src/App.tsx using parserOptions.project: /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

当前配置文件 #

.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已在tsconfig的include范围内，但仍出现该报错，项目完全由create-react-app创建未做其他修改，求解决方案。

解决方案 #

方法1：修正ESLint路径配置 #

确保parserOptions.project的路径解析正确，可改用绝对路径写法：

parserOptions: {
  tsconfigRootDir: __dirname,
  project: `${__dirname}/tsconfig.json`,
},

方法2：移除冲突的ESLint扩展 #

create-react-app自带的react-app扩展已包含TypeScript ESLint配置，手动添加的扩展可能引发冲突。修改.eslintrc.js的extends部分：

extends: [
  "react-app",
  "react-app/jest"
],

如需额外TypeScript规则，可在rules字段单独配置，而非引入完整扩展。

方法3：删除自定义ESLint配置文件 #

create-react-app创建的TypeScript项目内置了ESLint配置，自定义.eslintrc.js可能破坏原有逻辑。直接删除该文件，重启编辑器后验证。

方法4：清理缓存并重启动 #

执行命令清理ESLint和TypeScript缓存：

npx eslint --clear-cache
rm -rf node_modules/.cache

之后重启开发服务器和编辑器。

方法5：检查编辑器工作区根目录 #

确保编辑器打开的是/mnt/data0/work/my-app-ts目录，而非上级目录。工作区根目录错误会导致ESLint路径解析异常。

内容的提问来源于stack exchange，提问作者aimleo