Imports used exclusively in the <template> part of Vue SFCs are considered "never used" by Volar

[simensol]

This issue was originally raised in simonhaenisch/prettier-plugin-organize-imports, a library which sorts imports and removes unused ones.

Originally posted by @simonhaenisch in simonhaenisch/prettier-plugin-organize-imports#71 (comment):

[simonhaenisch/prettier-plugin-organize-imports] is using @volar/vue-typescript as a drop-in replacement to create the language service, and after that it's just a matter of calling the organizeImports method.

It seems that imports exclusively used in the <template> part of Vue SFCs are incorrectly considered as "never used" by Volar. Here is a minimal working example:

package.json:

...
    "devDependencies": {
        "@volar/vue-typescript": "^0.40.1",
        "prettier": "^2.7.1",
        "prettier-plugin-organize-imports": "^3.1.0",
...

types.ts:

export enum ThemeColor {
    PRIMARY = "primary",
    SECONDARY = "secondary",
    ACCENT = "accent",
    ERROR = "error",
    INFO = "info",
    SUCCESS = "success",
    WARNING = "warning"
}

sfc.vue:

<script setup lang="ts">
import { ThemeColor } from "@/types"
</script>

<template>
    Color is: {{ ThemeColor.PRIMARY }}
</template>

import { ThemeColor } from "@/types" is incorrectly considered as "never used" by Volar and then removed by simonhaenisch/prettier-plugin-organize-imports. If I add const color = ThemeColor.PRIMARY to the <script setup> part of sfc.vue, the import is not considered "never used" by Volar.

The same happens with functions used exclusively in the <template> part of Vue SFCs:

helpers.ts:

export function helloWorld(): string {
    return "Hello Worlds"
}

sfc.vue:

<script setup lang="ts">
import { helloWorld } from "@/helpers"
</script>

<template>
    {{ helloWorld() }}
</template>

Here, import { helloWorld } from "@/helpers" is marked as "never used" by Volar. However, if I add const hello = helloWorld() to the <script setup> part, the import is kept untouched.

[simonhaenisch]

Could be related to path aliases as well btw? Have you tried whether it's reproducible with a relative path instead of @/?

[simensol]

Same isse with

<script setup lang="ts">
import { ThemeColor } from "../utilities/types"
</script>

<template>Color is: {{ ThemeColor.PRIMARY }}</template>

[craigrileyuk]

I'm getting the same problem too, and I'm not directly using Typescript in my project.

[johnsoncodehk]

Duplicate of #1729

[simonhaenisch]

Thanks for the quick fix! Will this be released as 0.40.2 or 0.41.0?

[johnsoncodehk]

@simonhaenisch it's v0.40.2 because there are no breaking changes.