Closed
Description
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?
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 lintAdditional comments
This issue is similar to #174. The only difference is that this issue is occurred on local-defined types rather than imported types.