ESLint 'The extension for the file (.vue) is non-standard' error

Question

When run eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore . script using npm run lint, the following error occurs.

/(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

I'm using vue-eslint-parser and eslint-plugin-vue as devDependencies. And .eslintrc.js contains

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

as described in manual. And tsconfig.eslint.json is

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

Why these errors occur, and how can I use lint for Vue?

Interchangeable

Answer 1

the @typescript-eslint/parser parses these extentions as default: ['.js', '.mjs', '.cjs', '.jsx', '.ts', '.mts', '.cts', '.tsx']. , so it couldn't parse .vue files.

as the error has suggested, You should add "parserOptions.extraFileExtensions" to your config

so try add another line extraFileExtensions: [".vue"]. in parserOptions, so the @typescript-eslint/parser knows should compile .vue file as typescript file as well.

@see https://typescript-eslint.io/packages/parser/

Ppi