Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 8.54.0
- eslint-plugin-vue version: 9.18.1
- Node version: 16.15.1
- Operating System: MacOS M1 Ventura 13.2.1
Please show your full configuration:
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
],
rules: {
'vue/no-unused-properties': [
'error',
{
groups: [
'props',
'data',
'setup',
],
deepData: false,
ignorePublicMembers: true,
},
],
}
}What did you do?
<template>
<div class="hello">
<h1>{{ msgInternal }}</h1>
</div>
</template>
<script setup>
import {
computed,
// toRefs, // uncomment it to fix eslint error
defineProps
} from 'vue'
const props = defineProps({
msg: {
type: String,
required: true,
},
})
const { msg } = toRefs(props)
const msgInternal = computed(() => msg.value)
</script>
<style scoped>
</style>What did you expect to happen?
In the code above, the 'msg' prop will trigger a vue/no-unused-properties error, stating: 'msg' property found but never used. However, it is indeed being used.
What actually happened?
This bug occurs because the file does not import toRefs. Instead, it is imported by unplugin-auto-import, a global tool that eliminates the need for users to import certain common libraries. If you uncomment the toRefs import in this file, the ESLint error will disappear, and everything will be fine.
There are other rules that also have issues with 'unplugin-auto-import'. For instance, no-ref-object-reactivity-loss won't report an error unless 'toRefs' is imported.
Repository to reproduce this issue
https://github.com/Nathan7139/vue-unused-props-debug