PhpStorm - Vue: similar "ref" name as component name gives "Unused import"

28 Views Asked by At

PhpStorm behaves unstable in terms of recognising used/unused imports: when having a ref that is written the same as the component's name but only differs in upper/lowercase differences, this behaviour can suddenly happen. It is not always happening but sometimes, it depends on the component I work in.

Weird behaviour naming ref almost same as component

<template>
    <!-- When ref has almost same name (but lowercase) -->
    <PhotoManager ref="photoManager" />
</template>

<script setup>
import { ref } from 'vue'

// -> PhpStorm sometimes (not always) tells me this import is unused:
import PhotoManager from '~/packages/photo-manager/src/components/PhotoManager.vue'

const photoManager = ref()

</script>

The solution is to just use another ref

<template>
    <PhotoManager ref="photoManagerRef" />
</template>

<script setup>
import { ref } from 'vue'
import PhotoManager from '~/packages/photo-manager/src/components/PhotoManager.vue'

const photoManagerRef = ref()
</script>

When having a different name in the ref, it is resolved everywhere. Any idea why this is happening or where I can find information about the convention of (not) naming the ref the same as the component? I am working on a Mac by the way, don't know if that would be the reason for this to happen.

0

There are 0 best solutions below