typescript - ESLint 不相信我在 tsconfig 中包含了 .vue 文件

Question

我有一个 Vue.js 2 项目，我正在努力移植到 TypeScript(一次一点)。我试图让 ESLint 解析我的 TypeScript 文件和 Vue 组件，但是当我运行时 vue-cli-service lint我所有的 .vue 文件都报告这个错误:

error: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/path/to/Foo.vue.
The file must be included in at least one of the projects provided

当然，.vue 文件肯定包含在我的 tsconfig.json 文件中，如下所示:

// tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ES2020",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "strict": true,
    "alwaysStrict": true,
    "noEmitOnError": true,
    "noUnusedLocals": true,
    "importHelpers": true,
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "jsx": "preserve",
    "outDir": "dist",
    "baseUrl": ".",
    "types": ["webpack-env", "jest", "node", "googlemaps"],
    "typeRoots": ["./node_modules/@types", "./src/typings", "./src"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.vue"],
  "exclude": [
    "node_modules",
    "functions",
    "scripts",
    "coverage",
    "__snapshots__",
    "src/**/*.test.ts",
    "src/**/*.test.js",
    "tests/**"
  ]
}

我的 ESLint 配置是这样设置的:

// .eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "prettier/vue",
    "plugin:prettier/recommended",
    "@vue/typescript",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],

  env: {
    browser: true,
    amd: true,
    node: true,
    es6: true
  },

  parser: "vue-eslint-parser",
  plugins: ["@typescript-eslint", "vue"],
  parserOptions: {
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    project: "./tsconfig.json",
    extraFileExtensions: [".vue"]
  },

  rules: {
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn",
    "no-async-promise-executor": "off",
    semi: "error",
    "jest/expect-expect": "off",
    "jest/no-try-expect": "off",
    "@typescript-eslint/require-await": "warn",
    "@typescript-eslint/no-floating-promises": "warn",
    "@typescript-eslint/no-unsafe-member-access": "warn",
    "@typescript-eslint/restrict-template-expressions": "warn",
    "@typescript-eslint/restrict-plus-operands": "warn",
    "@typescript-eslint/no-unsafe-call": "warn",
    "@typescript-eslint/no-unsafe-assignment": "warn",
    "@typescript-eslint/no-unsafe-return": "warn"
  },

  overrides: [
    {
      files: ["**/*.test.{j,t}s?(x)"],
      env: {
        jest: true
      }
    }
  ]
};

我有一个包含这些条目的 .eslintignore 文件:

/tests
.eslintrc.js
sw.js
*.config.js
*-config.js

我还在运行以下相关插件:

// package.json
...
  "@typescript-eslint/eslint-plugin": "^4.2.0",
  "@typescript-eslint/parser": "^4.2.0",
  "@vue/cli": "^4.5.4",
  "@vue/eslint-config-typescript": "^5.1.0",
  "eslint": "^7.9.0",
  "eslint-plugin-vue": "^7.0.0-beta.4",
...

除了我现在所拥有的(见上文)之外，我几乎尝试了所有我知道要做的事情:

将我的 tsconfig 包括更改为 ["src/**/*.js", "src/**/*.ts", "src/**/*.vue"]

Changing my tsconfig includes只是 "src/**/*"

更改我将 ESLint 指向 tsconfig 的方式:

"tsconfig.json"

path.resolve(__dirname, "./tsconfig.json")

扩展@vue/typescript/recommended规则而不是 @vue/typescript

扩展@vue/typescript/recommended @vue/typescript 之后的规则

延长号 @vue ESLint 规则

排除 es6: true来自 env .eslintrc.js 中的条目

省略 plugins: ["@typescript-eslint", "vue"]

...每个都有相同的结果。
如您所见，我已经列出了 @typescript-eslint/parser作为自定义解析器，根据 this Vue doc .
This typescript-eslint issue似乎不适用，因为问题出在 CLI 中，而不是在 VSCode 中。此外，这不仅仅是"new"的 .vue 文件，而是项目中的所有 .vue 文件。
ESLint 是否正确，我配置错误？我怎样才能让它正确地检查我的 SFC 组件？

Answer 1

我通过使用 solution-style tsconfig 解决了这个问题而是使用 eslintrc overrides选择特定的文件扩展名并将 ESLint 指向正确的配置。
巧妙地应用。