ESLint“文件扩展名（.vue）是非标准”错误

Question

使用

eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .

运行

npm run lint

脚本时，出现以下错误。

/(somethingSomething...)/Test.vue
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: components/Test.vue.
The extension for the file (.vue) is non-standard. You should add "parserOptions.extraFileExtensions" to your config

我使用

vue-eslint-parser

和

eslint-plugin-vue

作为 devDependency。并且

.eslintrc.js

包含

...
extends: [
...
    'plugin:vue/recommended',
    "eslint:recommended"
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    project: './tsconfig.eslint.json'
  },
  plugins: [
    'html',
    'vue',
    'jest'
  ],
...

如手册中所述。

tsconfig.eslint.json

是

{
  "extends": "./tsconfig.json",
  "include": ["./**/*.ts", "./**/*.js", "./**/*.vue","test/**/*.js"]
}

为什么会出现这些错误，如何在 Vue 中使用 lint？

Answer 1

打字稿解析器默认解析这些扩展：

['.js', '.mjs', '.cjs', '.jsx', '.ts', '.mts', '.cts', '.tsx']. 

，因此无法解析

.vue

文件。

正如错误所示，

You should add "parserOptions.extraFileExtensions" to your config

所以尝试在

extraFileExtensions: [".vue"].

中添加另一行

parserOptions

，这样打字稿解析就知道它也应该将

.vue

文件编译为打字稿文件。

@参见https://typescript-eslint.io/packages/parser/