Organize imports: imports are falsely removed if components are kebap-cased

[linkurzweg]

I am using the Prettier plugin prettier-plugin-organize-imports to organize imports in .vue files. When imported components are used with kebap-case in the template part, the components are falsely recognized as unimported and get removed.

I originally raised an issue in the plugin's repo . But the developer made me aware of the fact that the plugin uses @volar/vue-typescript's language service and an issue regarding this problem needs to be raised here.

This works fine:

<template>
  <div>
    <NDivider />
  </div>
</template>

<script setup lang="ts">
  import { NDivider } from 'naive-ui'
</script>

This doesn't:

<template>
  <div>
    <n-divider />
  </div>
</template>

<script setup lang="ts">
  import { NDivider } from 'naive-ui'
</script>

[Teasday]

I'm not sure if I should've opened a new issue for this, but I came across two more similar problems under the same circumstances.

• Imported variables are falsely removed if they are only referenced as a component property
• The false removals also happen even if the import lines are commented out using <!-- --> (seems unintended, at least)

An example showcasing all three issues at once, as Prettier would remove these import lines:

<!-- <script setup lang="ts">
import TheHeader from "./components/TheHeader.vue"
import { appTitle } from "./settings"
</script> -->

<template>
  <the-header :title="appTitle" />
</template>