[no-unused-properties] can't recognize $props.xxx used

[levchak0910]

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.55.0
• eslint-plugin-vue version: 9.19.2
• Node version: not applied, repro in playground
• Operating System: not applied, repro in playground

Please show your full configuration:

{
    "rules": {
        'vue/no-unused-properties': 'error',
    }
}

What did you do?

<template>
  <div :class="$props.class"></div>
  <div>{{$props.for}}</div>
</template>

<script lang="ts" setup>
defineProps<{
  class: string
  for: number
}>()
</script>

What did you expect to happen?

props: class and for not reported as unused

What actually happened?

props: class and for reported as unused

Repository to reproduce this issue

playground link

Bug description:

When we want to define a prop name as a js keyword (for example: class, for, ...) it is required to use them as $props.PROP, because using simply as PROP will lead to parsing error.

Another option is to use as props.PROP with props variable declaration

<template>
  <div :class="props.class"></div>
  <div>{{props.for}}</div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  class: string
  for: number
}>()
</script>

but the rule doesn't support it too #2193

[FloEdelmann]

Duplicate of #1285

[levchak0910]

Thanks for clarifying status
I saw the #1285 issue, but it was not clear if fix is planned

[levchak0910]

@FloEdelmann I have a fix for this issue, but only for using $props.PROP in <template> (PROP will still be reported even if $props.PROP is used in <script>)

This fix is like a half-solution (supporting all scenarios will require lots of changes), so I would like to ask first: is it worth sending PR?

[FloEdelmann]

I guess that's already an improvement, so IMO it's definitely worth a PR.

[FloEdelmann]

Reopening this issue for only the specific issue of using $props.xxx.