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

[Tanimodori]

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?

• [email protected]
• [email protected]

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      

> [email protected] 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.

[ota-meshi]

Thank you for reporting the issue.
We can see it in other playgrounds as well.

https://eslint-online-playground.netlify.app/#eNqtVE1v2zAM/Sucd+g2NBY2YBcvLYZ9FLsMuxQthrkH1WIcbbYkSHLaIvB/HyXZsdOmwQ47RSYfycenp2wzZyv2/eGzbo1WqHy+6TArsqWrrDQeHPrOQMNVfVZm3pXZeakkQa2Hb9g0+lrbRsDK6hbKLGfV2MaxKR1altmHXeHlGq+xISgeLJzSu0LG4ORC6xOQDgSupEIBt50HhRu00DkUObxC10jlP/oHg4n8IkWY0otOBdBiw617TTyUR7viFQI1hW2pAFZaF+C8laqmeX0a+Ynb/zUyQID6wdk0ZclSEUlKHx5b03CP9AWwXCMXaOOZvmRbpxMAbzzdxFWH0Ohal9kYrxruHGX2o3S5FMsZ5ZCkDcncbeoJcCeFXxPk7bv3U3CNsl6HMbMoiywjGyE3u3F3lhuDNvoiFS9nvmhdsM1P3YGQAqR/McMRclwZXpLCvIubbcNVQF+Eq9lDE96cU7CAbcJwFwXt+yUz865sT8kUmjiNkjLaIknNdlrHz5ZLNYJmTg37B/CQ3puSnWZ5unhb5b+dVvSAoqvKDO89KkHvpoBfqSnFIrSwSI1byqIos9MxaZqulqog57Nb7sj+jzMH3LbXKcBvYhGVkPnQ/jBeahU5RFaRQ9XyK7SOEiFOvqFVnJ+Nc7qzFV7SsARoteiaOR9azfIL2eDXsGPoNKyZpXd7E4D9wETTq7FS4FyJgUxIr6jNWP0mD/8zpxQNp/vxWE3RNhzTjoM0cc/E84A+YzoVJEpHxif2z7Sn5NB2MYafIJ8K/rjPLBwSYZ9/4h75j8fhEH9I7J5saHj1h9f4yIQCN1/QBH+oSqZFd0Y4MvKgLQ7gRzmiP58pS5ijyaHBIsp/EDeN3gdEowUB+r8cKTKZ

[Tanimodori]

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