Rule proposal: warn about missing required props

[Preston-Landers]

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.

[FloEdelmann]

I'm afraid this is out of scope for this ESLint plugin (or maybe even for ESLint in general), as there is no way to look at the source of other files. Right now, it would only be possible to check components that are defined in the same file; and according to the style guide, this would only be recursive components then.

require in eslint that a certain list of HTML elements has certain required attributes

That could be a good rule for this plugin, but the configuration would need to be specified manually. Please open a new issue for that rule suggestion.