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

Posted 2023-02-22

【中文标题】ESLint 不相信我在我的 tsconfig 中包含了 .vue 文件

【英文标题】：ESLint doesn't believe that I've included .vue files in my tsconfig

【发布时间】：2021-01-11 01:21:48

【问题描述】：

我有一个 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,ts?(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 规则 从 .eslintrc.js 中的 env 条目中排除 es6: true 省略plugins: ["@typescript-eslint", "vue"]

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

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

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

ESLint 是否正确，我配置错误？如何让它正确地 lint 我的 SFC 组件？

【参考方案1】：

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

巧妙地应用。