ESLint doesn't believe that I've included .vue files in my tsconfig

Question

I've got a Vue.js 2 project I'm working to port to TypeScript (a little at a time). I'm trying to get ESLint to parse my TypeScript files and Vue components, but when I run vue-cli-service lint all of my .vue files report this error:

error: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/path/to/Foo.vue.
The file must be included in at least one of the projects provided

Of course, .vue files surely are included in my tsconfig.json file, as shown:

// tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ES2020",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "strict": true,
    "alwaysStrict": true,
    "noEmitOnError": true,
    "noUnusedLocals": true,
    "importHelpers": true,
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "jsx": "preserve",
    "outDir": "dist",
    "baseUrl": ".",
    "types": ["webpack-env", "jest", "node", "googlemaps"],
    "typeRoots": ["./node_modules/@types", "./src/typings", "./src"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.vue"],
  "exclude": [
    "node_modules",
    "functions",
    "scripts",
    "coverage",
    "__snapshots__",
    "src/**/*.test.ts",
    "src/**/*.test.js",
    "tests/**"
  ]
}

My ESLint config is set up like so:

// .eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "prettier/vue",
    "plugin:prettier/recommended",
    "@vue/typescript",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],

  env: {
    browser: true,
    amd: true,
    node: true,
    es6: true
  },

  parser: "vue-eslint-parser",
  plugins: ["@typescript-eslint", "vue"],
  parserOptions: {
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    project: "./tsconfig.json",
    extraFileExtensions: [".vue"]
  },

  rules: {
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn",
    "no-async-promise-executor": "off",
    semi: "error",
    "jest/expect-expect": "off",
    "jest/no-try-expect": "off",
    "@typescript-eslint/require-await": "warn",
    "@typescript-eslint/no-floating-promises": "warn",
    "@typescript-eslint/no-unsafe-member-access": "warn",
    "@typescript-eslint/restrict-template-expressions": "warn",
    "@typescript-eslint/restrict-plus-operands": "warn",
    "@typescript-eslint/no-unsafe-call": "warn",
    "@typescript-eslint/no-unsafe-assignment": "warn",
    "@typescript-eslint/no-unsafe-return": "warn"
  },

  overrides: [
    {
      files: ["**/*.test.{j,t}s?(x)"],
      env: {
        jest: true
      }
    }
  ]
};

I have a .eslintignore file with these entries:

/tests
.eslintrc.js
sw.js
*.config.js
*-config.js

I'm also running the following relevant plugins:

// package.json
...
  "@typescript-eslint/eslint-plugin": "^4.2.0",
  "@typescript-eslint/parser": "^4.2.0",
  "@vue/cli": "^4.5.4",
  "@vue/eslint-config-typescript": "^5.1.0",
  "eslint": "^7.9.0",
  "eslint-plugin-vue": "^7.0.0-beta.4",
...

I've tried nearly everything I know to do, aside from what I've got now (see above):

• Changing my tsconfig includes to ["src/**/*.js", "src/**/*.ts", "src/**/*.vue"]
• Changing my tsconfig includes to just "src/**/*"
• Changing how I point ESLint to the tsconfig:
  • "tsconfig.json"
  • path.resolve(__dirname, "./tsconfig.json")
• Extending @vue/typescript/recommended rules instead of @vue/typescript
• Extending @vue/typescript/recommended rules after @vue/typescript
• Extending no @vue ESLint rules
• Excluding es6: true from the env entry in .eslintrc.js
• Omitting plugins: ["@typescript-eslint", "vue"]

... each with identical results.

As you can see, I've listed @typescript-eslint/parser as a custom parser, as per this Vue doc.

This typescript-eslint issue doesn't seem to apply, because the issue is in the CLI, not in VSCode. Also, this isn't just "new" .vue files, but all .vue files in the project.

Is ESLint correct that I've misconfigured something? How can I get it to lint my SFC components properly?

Answer 1

I solved the issue by using a solution-style tsconfig instead and using eslintrc overrides to select specific file extensions and point ESLint to the correct config.

Apply cleverly.