Description
Please describe what the rule should do:
Enforce (or warn) when a required prop is not given to a Vue component.
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:
// CurrentMood.vue
<script>
export default {
name: "CurrentMood",
props: {
emotion: {
type: String,
required: true,
},
},
}
</script>
// GOOD example
<CurrentMood emotion="happy" />
// BAD example - missing required prop
<CurrentMood />Additional context
Am I missing something obvious or is there no way to detect a case when you fail to give a required prop? PyCharm's Vue plugin is able to detect this via the HTML inspection "missing required attribute".
It would be great if eslint could detect this too. I did a ticket search and couldn't find any similar requests. Please forgive me if this has already been discussed and rejected.
On a related note, I'm also looking for a way to require in eslint that a certain list of HTML elements has certain required attributes within a Vue file. E.g. require "id" attributes on <button>, <input>, etc., as well as on certain Vue components.