Upgrading from 0.2.0 -> 0.3.0 breaks @typescript-eslint/consistent-type-imports in vue files with only template syntax

Q16solver commented 7 months ago

Environment

Operating System: Windows_NT
Node Version: v20.11.0
Nuxt Version: 3.11.1
CLI Version: 3.11.0
Nitro Version: 2.9.4
Package Manager: pnpm@8.15.6
Builder: -
User Config: alias, app, build, experimental, imports, nitro, runtimeConfig, typescript, vite, modules, authJs, pwa, unfonts, unocss
Runtime Modules: @hebilicious/authjs-nuxt@0.3.5, @nuxt/test-utils/module@3.12.0, @pinia/nuxt@0.5.1, @unocss/nuxt@0.58.9, @vite-pwa/nuxt@0.6.0, @vueuse/nuxt@10.9.0, unplugin-fonts/nuxt, vuetify-nuxt-module@0.13.2
Build Modules: -

Package

Eslint-Config/legacy

Reproduction

Source code: https://github.com/Esposter/Esposter/blob/main/.eslintrc Minimal repro: https://stackblitz.com/edit/github-hlcarv

Describe the bug

After running pnpm lint I get the following error. I'm not sure if it's been a recent change with vue-eslint-parser? But it was working in v0.2.0 and I don't really want to remove the @typescript-eslint/consistent-type-imports rule, since it would make my script setup in vue files not have consistent top level import syntax. This seems to only happen if I have vue files that do not have script setup, only template syntax.

Edit: While I'm at it, is there an easy option to add rules that require parser services (e.g. all the typescript strict plugins) to include the script setup ts section as well? Currently using overrides only does it for pure ts files, which isn't great

ESLint: 8.57.0

Error: Error while loading rule '@typescript-eslint/consistent-type-imports': 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. Parser: ....pnpm\vue-eslint-parser@9.4.2_eslint@8.57.0\node_modules\vue-eslint-parser\index.js Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser. Occurred while linting ...\assets\dungeons\icons\DungeonGate.vue at throwError (...\node_modules.pnpm\@typescript-eslint+utils@7.6.0_eslint@8.57.0_typescript@5.4.4\node_modules\@typescript-eslint\utils\dist\eslint-utils\getParserServices.js:40:11)

Additional context

No response

Logs

No response

antfu commented 7 months ago

We temporarily closed this due to the lack of enough information. We could not identify whether it was a bug or a userland misconfiguration with the given info. Please provide a minimal reproduction to reopen the issue. Thanks.

Why reproduction is required

Q16solver commented 7 months ago

@antfu Yep, sorry about that, is this minimal repro enough? https://stackblitz.com/edit/github-hlcarv then npm i and npm run lint for the issue downgrading to v0.2.0 works, but v0.3.4 does not

antfu commented 7 months ago

It's a bit tricky for me to inspect what is going on internally, since we didn't touch the legacy config other than bumping the dependencies.

Would you consider moving to the flat config format https://eslint.nuxt.com/packages/config#flat-config-format or even directly the module https://eslint.nuxt.com/packages/module ? - I am sure @typescript-eslint/consistent-type-imports works in flat config.

Q16solver commented 7 months ago

Yep, to be honest before trying to raise the issue, I tried migrating to flat config, but some plugins aren't supported yet (the eslint config I'm trying to migrate is in the source code link above), the eslint-plugin-import doesn't support flat config yet, if there's some suggestions you could give for an easier/alternative migration experience, I'd definitely be willing to try that out

Edit: Just tried out changing to @nuxt/eslint flat config module, still receiving the same parser issue with vue-eslint-parser, read in some issues but apparently we can't use parser services rules in custom paresers like vue-eslint parser ref: https://github.com/vuejs/vue-eslint-parser/issues/104#issuecomment-909082288

It might be because the recently bumped deps of typescript eslint parser somehow now requires @typescript-eslint/consistent-type-imports to use a parser service

Edit 2: Yep, the issue is because typescript eslint v6 -> v7 parser somehow now requires that specific rule to generate parser services... The issue is I have no idea what parser services are and if there's just an easy way for me to specifiy all the custom rules I want in a single array, instead of doing all these weird overrides to specify specific files, though it's probably due to the way vue files work that it requires separate rules

Q16solver commented 7 months ago

Ok, after some migration pains, seems like it was ok to migrate, didn't know that there was an eslint-import-plugin-x that has v9 eslint compatible config, so that was great

For anyone else who stumbles upon this, an equivalent migrated config I have here is: https://github.com/Esposter/Esposter/blob/main/eslint.config.js

The new eslint module inherently has @typescript-eslint/consistent-type-imports applied to both .ts and .vue files and adding "import/consistent-type-specifier-style": "error", will handle all the type import style shenanigans.

If people still want to stick with the old legacy config, the issue is that typescript eslint v6 -> v7 parser changes some rules apparently, I haven't really investigated and don't plan to since it's legacy, but if anyone wants a workaround, simply just add override in package.json as follows

    "overrides": {
      "@typescript-eslint/eslint-plugin": "^6.21.0",
      "@typescript-eslint/parser": "^6.21.0"
    }

I'll close this now

nuxt / eslint