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"]
• 将我的 tsconfig 更改为仅"src/**/*"
• 更改我将 ESLint 指向 tsconfig 的方式：
  • "tsconfig.json"
  • path.resolve(__dirname, "./tsconfig.json")
• 扩展@vue/typescript/recommended规则而不是 @vue/typescript
• 之后扩展@vue/typescript/recommended规则 @vue/typescript
• 不 扩展@vueESLint 规则
• es6: true从env.eslintrc.js 中的条目中排除
• 省略plugins: ["@typescript-eslint", "vue"]

...每个都有相同的结果。

如您所见，@typescript-eslint/parser根据此 Vue 文档，我已将其列为自定义解析器。

这个 typescript-eslint 问题似乎不适用，因为问题是在 CLI 中，而不是在 VSCode 中。此外，这不仅仅是“新”.vue 文件，而是项目中的所有.vue 文件。

ESLint 认为我配置错误是正确的吗？如何让它正确检查我的 SFC 组件？

Answer 1

我通过使用解决方案样式的 tsconfig 来解决这个问题，并使用eslintrc 覆盖来选择特定的文件扩展名并将 ESLint 指向正确的配置。

巧妙地应用。