Using typescript causes "declared but never read" errors for components/variables only used in pug template

[Dylancyclone]

I'm working on a project with the following structure:

• Vue 3
• Vite 5
• Typescript 5
• ESLint 9 (also tried 8)

And I'm having trouble getting this plugin to work with typescript. Whenever I have my SFC with both the template using pug and the script using ts, typescript cannot find components/variables being used in the template and throws an error saying they're unused.

.eslint.cjs:

module.exports = {
    root: true,
    // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
    parserOptions: {
        parser: require.resolve("@typescript-eslint/parser"),
        extraFileExtensions: [".vue"],
    },
    env: {
        browser: true,
        es2021: true,
        node: true,
        "vue/setup-compiler-macros": true,
    },
    extends: [
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-recommended", // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
        "plugin:vue-pug/vue3-recommended",
        "prettier",
    ],

    plugins: [
        "@typescript-eslint",
        // required to lint *.vue files
        "vue",
    ],
    [...]
}

Thank you for your awesome work on this plugin!

[rashfael]

Does that warning come from eslint itself or from somewhere else? Do you also get that warning when you run eslint in the console?

[Dylancyclone]

Looks like it's coming from the typescript compiler, not eslint.

I found a few issues describing the same thing https://github.com/vuejs/eslint-plugin-vue/issues/1810 and https://github.com/vuejs/language-tools/issues/604, both of which recommended using this package https://github.com/Shinigami92/eslint-plugin-vue-pug-sfc. But that has since been archived in favor of this package. Before migrating this project to typescript, this plugin was successfully handling all the rules (thanks again), so the only difference appears to be typescript

[rashfael]

Sadly eslint-plugin-vue-pug can only provide pug support to eslint rules. Eslint can include a typescript pass and there is @vue/eslint-config-typescript which helps setting up typescript inside eslint.

eslint-plugin-vue-pug can't teach other typescript (editor) tools how to parse pug though. The direct ts integration in vscode for example isn't aware of pug, leading to the issue you describe.

There is https://www.npmjs.com/package/@vue/language-plugin-pug. I haven't tried that out myself though.

[Dylancyclone]

At a first glance, it looks like @vue/language-plugin-pug is doing the trick! Thank you very much!

[yanzhangshuai]

Sadly eslint-plugin-vue-pug can only provide pug support to eslint rules. Eslint can include a typescript pass and there is @vue/eslint-config-typescript which helps setting up typescript inside eslint.

eslint-plugin-vue-pug can't teach other typescript (editor) tools how to parse pug though. The direct ts integration in vscode for example isn't aware of pug, leading to the issue you describe.

There is https://www.npmjs.com/package/@vue/language-plugin-pug. I haven't tried that out myself though.

At a first glance, it looks like @vue/language-plugin-pug is doing the trick! Thank you very much!

@vue/language-plugin-pug is right. thinks. But I have another question eslint --fix will remove no-unused-imports，Will mistakenly remove used。 Can Help me? thinks。

This is my configuration

[rashfael]

Please create a separate issue for this new problem, with a clean reproduction if possible.