ESLint检测.vue文件提示扩展名非标准错误的原因及解决办法

报错原因 #

这个报错是@typescript-eslint/parser的特性导致的：当你开启了parserOptions.project关联tsconfig做类型感知的lint检查时，它默认只会处理.js/.ts/.jsx/.tsx这几个标准后缀的文件，.vue属于非标准后缀，哪怕你在tsconfig的include字段里添加了.vue文件的匹配规则，@typescript-eslint/parser本身默认也不会识别这类后缀的文件，所以会抛出这个错误提示你添加额外支持的后缀配置。

解决方法 #

只需要修改你的.eslintrc.js配置，在parserOptions字段中添加extraFileExtensions配置即可，修改后的配置如下：

...
extends: [
...
    'plugin:vue/recommended',
    "eslint:recommended"
  ],
  parser: "vue-eslint-parser", // 这一行保持不变，必须用vue-eslint-parser处理vue文件的模板解析
  parserOptions: {
    parser: "@typescript-eslint/parser",
    project: './tsconfig.eslint.json',
    extraFileExtensions: ['.vue'] // 新增这一行，告诉@typescript-eslint/parser支持.vue后缀文件
  },
  plugins: [
    'html',
    'vue',
    'jest'
  ],
...

修改完成后重新执行npm run lint即可正常校验vue文件。
如果修改后还出现同类报错，可以再检查两个点：

• 确认tsconfig.eslint.json的include字段的路径确实覆盖到了所有你需要校验的.vue文件，如果你项目的组件目录不在配置的匹配路径内，需要补充对应的匹配规则
• 确认.eslintrc.js和tsconfig.eslint.json的相对路径匹配，parserOptions.project的路径是相对于.eslintrc.js所在目录的，如果你把tsconfig放在了其他目录，需要调整对应的相对路径

内容的提问来源于stack exchange，提问作者HK S0