Add new rule: no-restricted-html-elements

[doug-wade]

Hi there! I would like to add a new rule to the plugin inspired by the React forbid-elements rule. I'm trying to solve a problem with a large project we're working on at work where developers aren't using our Button component from our component library, but are instead are using the button html element. I would like to forbid use of the button html tag altogether to encourage adoption, so I would like to add:

{
  "vue/html-forbid-elements": ["error", { "forbid": ["button"] }]
}

to our eslintrc file and then emit linting errors when new button tags are added. I will likely also use this for anchor tags to encourage use of our Link component.

Another use case might be to restrict use of deprecated html elements, like marquee.

[ota-meshi]

Thank you for this PR.

I think the rule name should be no-restricted-html-elements, just like any other user-specified disallow rule.
e.g.

• https://eslint.vuejs.org/rules/no-restricted-block.html
• https://eslint.org/docs/rules/no-restricted-imports
• https://eslint.org/docs/rules/no-restricted-globals

Could you change the rule name?

Also, like any other no-restricted rules, could you change the options to be accepted in an array, and allow users to specify custom messages in the options using object forms?

Perhaps the source code for the following rule will be helpful to you.
https://eslint.vuejs.org/rules/no-restricted-block.html

[doug-wade]

@ota-meshi Thank you so much for leaving a review so quickly! It's my first time contributing to this repo, so it was rough around the edges, and I appreciate your feedback.

[FloEdelmann]

I only suggest some minor spelling/wording and code style improvements. The rest looks fine though from my side. Thanks!

[ota-meshi]

Almost LGTM. I have some simple change requests in usage.

[ota-meshi]

LGTM! Thank you!

[FloEdelmann]

Thanks for implementing the feedback! :)