vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.44k stars 663 forks source link

vue/no-unused-properties doesn't recognize usages of props with toRefs #1496

Closed unshame closed 2 years ago

unshame commented 3 years ago

Checklist

Tell us about your environment

Please show your full configuration:

module.exports = {
    extends: [
        'plugin:vue/vue3-recommended',
    ],
    rules: {
        'vue/no-unused-properties': [
            'error',
            {
                groups: [
                    'props', // TODO: figure out why doesn't work for toRefs
                    'data',
                    'setup',
                ],
                deepData: false,
                ignorePublicMembers: true, // mark with /** @public */
            },
        ],
    }
}

What did you do?

<template>
  <div class="hello">
    <h1>{{ msgInternal }}</h1>
  </div>
</template>

<script>
import { computed, defineComponent, toRefs } from '@vue/composition-api';

export default defineComponent({
    name: 'HelloWorld',
    props: {
        msg: {
            type: String,
            required: true,
        },
    },

    setup(props) {
        const { msg } = toRefs(props);

        return {
            msgInternal: computed(() => msg.value),
        }
    }
});
</script>

What did you expect to happen? prop msg would be marked as used.

What actually happened?

E:\Git\vue-unused-props-debug\src\components\HelloWorld.vue 13:9 error 'msg' of property found, but never used vue/no-unused-properties

Repository to reproduce this issue https://github.com/unshame/vue-unused-props-debug

ota-meshi commented 2 years ago

Fixed in #1647.