Eslint 报错问题总结 vue3+typescript

报错内容：

点击ts文件，eslint不报错，点击vue文件eslint报错

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

报错原因：

eslint配置文件.eslintrc.js没有对vue文件做解析，只对ts文件进行了解析配置

解决方法：

方式一： 忽略vue文件 在.eslintigore.js文件中增加*.vue,如没有就新建一个，

方式二：

推荐使用大佬的教程配置： juejin.cn/post/684490…

我自己的配置：

1、下载veu解析依赖包: npm i -D prettier vue-eslint-parser eslint-plugin-vue

2、配置.eslintrc.js

extends: ['eslint:recommended', 'plugin:vue/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
plugins: ['@typescript-eslint'],
parser: 'vue-eslint-parser', // 解析vue
parserOptions: {
  parser: '@typescript-eslint/parser', // 解析ts
  ecmaVersion: 2020,
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true,
  },
  tsconfigRootDir: __dirname,
  project: ['./tsconfig.json'], // eslint规则
},
rules: {
  '@typescript-eslint/unbound-method': 'off',
  '@typescript-eslint/ban-ts-comment': 'off',
  '@typescript-eslint/explicit-module-boundary-types': 'off',
  '@typescript-eslint/no-empty-function': 'warn',
  '@typescript-eslint/ban-types': [
    'error',
    {
      extendDefaults: true,
      types: {
        '{}': false,
      },
    },
  ],
  '@typescript-eslint/no-explicit-any': 'off',
  'vue/multi-word-component-names': 'off' // vue组件模板名称
},

3、配置 tsconfig.json

"include": ["src/**/*.vue", "src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx", "global.d.ts", "auto-imports.d.ts"],
"exclude": ["node_modules"]