Skip to content

vue/no-unused-properties false alarm with unplugin-auto-import #2322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
2 tasks done
Nathan7139 opened this issue Nov 21, 2023 · 1 comment
Closed
2 tasks done

vue/no-unused-properties false alarm with unplugin-auto-import #2322

Nathan7139 opened this issue Nov 21, 2023 · 1 comment

Comments

@Nathan7139
Copy link

Nathan7139 commented Nov 21, 2023

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

@Nathan7139 Nathan7139 changed the title vue/no-unused-properties false negative with unplugin-auto-import vue/no-unused-properties false alarm with unplugin-auto-import Nov 21, 2023
@FloEdelmann
Copy link
Member

FloEdelmann commented Nov 21, 2023

@FloEdelmann FloEdelmann closed this as not planned Won't fix, can't repro, duplicate, stale Nov 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants