Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jez9999 opened this issue Oct 13, 2022 · 2 comments
Open

Comments

@jez9999
Copy link

jez9999 commented Oct 13, 2022

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

@LinusBorg LinusBorg transferred this issue from vuejs/core Oct 13, 2022
@haoqunjiang
Copy link
Member

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
Copy link
Author

jez9999 commented Oct 13, 2022

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants