Skip to content

False positive eslint@typescript-eslint/no-unused-vars if imported type used in template declaration only #174

Closed
@Tanimodori

Description

@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.28.0

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

  • vue-eslint-parser@9.1.0
  • eslint-plugin-vue@9.3.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",
  },
};

App.vue

<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)
import type { Foo, Bar } from "./types";
</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>

types.ts

export interface Foo {
  foo: string;
}

export type Bar = string;

What did you expect to happen?

Foo is used in template like HelloWorld and Bar which should be a used var.

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:\projects\vue-eslint-unused-vars-repro\src\App.vue
5:15 warning 'Foo' is defined but never used @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

Link to Minimal Reproducible Example

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

Additional comments

I read from the FAQ that the no-unused-vars is fixed in vue-eslint-parser>9. It seems that types used in slot declaration is still unfixed while the Vue component and interpolation are fixed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions