Default vue@3 site tsconfig doesn't work with @typescript-eslint rules

[jez9999]

Vue version

3.2.38

Link to minimal reproduction

https://gitlab.com/jez9999/vue3-demo

Steps to reproduce

npm init vue@3

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... Yes
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... No
√ Add Vitest for Unit Testing? ... Yes
√ Add Cypress for End-to-End testing? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... No

What is expected?

There should be a config that allows rules such as "@typescript-eslint/no-unsafe-assignment": "error" to be configured. However, when this is configured, the following error is given:

You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

If you then provide this project value in .eslintrc.cjs:

  parserOptions: {
    ecmaVersion: 'latest',
    "project": "./tsconfig.json",
    "parser": "@typescript-eslint/parser"
  },

... Vue's .tsconfig setup should work with this.

What is actually happening?

Because Vue's .tsconfig setup is using project references, this does not work with typescript-eslint parser services. typescript-eslint does not yet support project references.

There are many useful ESLint rules in that repo that I wish to enforce on my Vue TypeScript code, so it is a major problem that the default Vue site's config doesn't work with it. I'd like to know how to get it to work, and perhaps the default config should be changed to avoid using project references.

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 5.12 GB / 15.64 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (106.0.1370.42)
    Internet Explorer: 11.0.19041.1

Any additional comments?

No response

[sodatea]

You can take the configurations from https://github.com/vuejs/eslint-config-airbnb/blob/baf71f4566110e37b3d6f041a2f842c1c9960961/packages/eslint-config-airbnb-with-typescript/index.js#L83-L92 as a reference.

TBH, I myself also find it very challenging to get the ESLint configuration work out of the box for complex projects, while still keeping it easy to use and understand for newcomers. So I still haven't finished redesigning the default @vue/eslint-config-typescript package. Until then, if you need more advanced ESLint configuration, please use https://github.com/vuejs/eslint-config-airbnb/tree/main/packages/eslint-config-airbnb-with-typescript or https://github.com/vuejs/eslint-config-standard/tree/main/packages/eslint-config-standard-with-typescript or create your own.

[jez9999]

Yikes. That really reminds me why I had a good hard long look into using Blazor for my project instead of JS/TS/Vue. The latter still feels unfinished to the point of being buggy. Hopefully in a few years Blazor will be ready for primetime and I can just use C# from start to finish!