vuejs/vue-eslint-parser

False positive `eslint@typescript-eslint/no-unused-vars` if local type is used in template declaration only

Tanimodori opened this issue · 3 comments

Tanimodori commented

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I'm using eslint-plugin-vue.
  • I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

8.39.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

  • vue-eslint-parser@9.1.1
  • eslint-plugin-vue@9.11.0

What did you do?

Configuration 
module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module",
  },
};

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
// 'Foo' is defined but never used. (eslint@typescript-eslint/no-unused-vars)
interface Foo {
  foo: string;
}
// 'Bar' is defined but never used. (eslint@typescript-eslint/no-unused-vars)
type Bar = string;
</script>

<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="./assets/logo.svg"
      width="125"
      height="125"
    />

    <div class="wrapper">
      <HelloWorld msg="You did it!">
        <template #default="{ foo }: Foo">
          <p>Foo: {{ foo as Bar }}</p>
        </template>
      </HelloWorld>
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

What did you expect to happen?

Foo and bar are used in template which should be a used var. No errors will be present.

What actually happened?

> npm run lint      

> vue-eslint-unused-vars-repro@0.0.0 lint
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore


C:\project\vue-eslint-unused-vars-repro\src\App.vue
  5:11  warning  'Foo' is defined but never used  @typescript-eslint/no-unused-vars
  9:6   warning  'Bar' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

Link to Minimal Reproducible Example

https://github.com/Tanimodori/vue-eslint-unused-vars-repro/tree/local-define

The repro is in the local-define branch.

git clone https://github.com/Tanimodori/vue-eslint-unused-vars-repro
cd vue-eslint-unused-vars-repro
git checkout local-define
npm i
npm run lint

Additional comments

This issue is similar to #174. The only difference is that this issue is occurred on local-defined types rather than imported types.

Tanimodori commented

Good to know there is an online repl webpage for this repo. Thank you.

Eyrum commented

in template pug seem still have the issue