typescript - ESLint 不認為我已經在 tsconfig 中包含了 .vue 文件

我有一個 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 的 includes 更改為 ["src/**/*.js", "src/**/*.ts", "src/**/*.vue"]
將我的 tsconfig 的 includes 改為僅 "src/**/*"

更改我指向 tsconfig 的 ESLint 方式：

```
"tsconfig.json"
```

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

擴展 @vue/typescript/recommended 規則 而不是 @vue/typescript
在 @vue/typescript 之後擴展 @vue/typescript/recommended 規則
擴展 no @vue ESLint 規則
從 .eslintrc.js 的 env 條目中排除 es6: true
省略 plugins: ["@typescript-eslint", "vue"]

... 每個都有相同的結果。

如你所見，我已根據這份 Vue 文件將 @typescript-eslint/parser 列為自訂解析器。

這個 typescript-eslint 問題似乎不適用，因為問題出在 CLI，而不是 VSCode。此外，這不僅僅是「新的」.vue 檔案，而是專案中所有的 .vue 檔案。

ESLint 說我配置錯誤是正確的嗎？我該如何讓它正確檢查我的 SFC 組件？

答案＃1

我通過改用解決方案風格的 tsconfig 並使用 eslintrc 覆寫來選擇特定的檔案擴展名，並指向正確的 ESLint 配置，解決了這個問題。

巧妙地應用。