Conflict: doesn't work if using separate overrides .vue and .ts

[doubleaxe]

Checklist

• [X] I have tried restarting my IDE and the issue persists.
• [X] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.57.0
• eslint-plugin-vue version: 9.23.0
• Vue version: 3.4.21
• Node version: 18.16.0
• Operating System: MacOS 10.14.6

Please show your full configuration: .eslintrc.yml file

root: true
extends:
    - 'eslint:recommended'
parserOptions:
    project: './tsconfig.json'
overrides:
    -
        files:
            - "*.ts"
        extends:
            - plugin:@typescript-eslint/recommended-type-checked
        parser: "@typescript-eslint/parser"
    -
        files:
            - "*.vue"
        extends:
            - plugin:@typescript-eslint/recommended-type-checked
            - plugin:vue/recommended
        parser: vue-eslint-parser
        parserOptions:
            parser: "@typescript-eslint/parser"
            extraFileExtensions: ['.vue']

tsconfig.json file

{
  "include": ["./**/*.ts", "./**/*.vue"],
  "exclude": ["./**/node_modules/**"],
  "compilerOptions": {
    "baseUrl": ".",
  }
}

package.json file

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "eslint": "^8.57.0",
    "typescript": "^5.4.2",
    "vue": "^3.4.21",
    "@types/eslint": "^8.56.5",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "eslint-plugin-vue": "^9.23.0",
    "vue-eslint-parser": "^9.4.2"
  }
}

What did you do?
file.vue

<script setup lang="ts">
</script>
<template>
    <div>
</template>

file.ts

export type Test = {
    foo: string;
    bar: number;
};

What actually happened?

I provided 5 files for minimal reproducible example. With above config, if you lint files separately, i.e. npx eslint . --ext .ts and npx eslint . --ext .vue everything works fine. If you lint them both with just npx eslint . or npx eslint . --ext .ts,.vue - eslint fails to validate vue file with the following exception:

file.vue
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/file.vue` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

It took me 3 days to figure out why my config sometimes works, sometimes doesn't work and isolate issue :). I guess there is conflict somewhere, because both plain typescript parser and vue typescript parser use the same typescript processor. Package manager doesn't matter, the same issue occurs with yarn.

Repository to reproduce this issue

https://github.com/doubleaxe/eslint-plugin-vue-bugreport

[ota-meshi]

To resolve the issue, you need to configure all parserOptions to include extraFileExtensions. Could you please try it?

https://github.com/typescript-eslint/typescript-eslint/issues/6778

[doubleaxe]

you are right, this config works:

root: true
extends:
    - 'eslint:recommended'
parserOptions:
    project: './tsconfig.json'
overrides:
    -
        files:
            - "*.ts"
        extends:
            - plugin:@typescript-eslint/recommended-type-checked
        parser: "@typescript-eslint/parser"
        parserOptions:
            extraFileExtensions: ['.vue']
    -
        files:
            - "*.vue"
        extends:
            - plugin:@typescript-eslint/recommended-type-checked
            - plugin:vue/recommended
        parser: vue-eslint-parser
        parserOptions:
            parser: "@typescript-eslint/parser"
            extraFileExtensions: ['.vue']