Description
Please describe what the rule should do:
This rule should warn users that define a component prop named ref, as it will be unusable.
What category should the rule belong to?
[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
There are several ways to define props, here's the script-setup + TS way:
<script setup lang="ts">
defineProps<{
ref: string // <- Error: "ref" is a reserved name that can't be used by props.
}>()
</script>Additional context
You might say it should be obvious it can't be bound as the keyword ref inside a template is reserved for a different use, but it happened to a coworker of mine last week who lost half an hour not understanding why his component was not bound to the correct value.
- Not every Vue beginner knows about
refand what it does. - Even so, some situations can be sneaky. In my coworker's case, he tried to bound the component through a
h()-like API, actually he was trying to do:showModal(MyDialogComponent, /* props: */ { name: "abc", ref: 123 })and it might not be immediately clear to you thatrefis not gonna be bound toMyDialogComponentpropref.
I haven't checked the format of the state bound to components, there might be other reserved names? Can't think of one right now.