Linter Rule: inverse of `html-no-self-closing`

[G-Rath]

Rule: either

• html-self-closing-tag (replacing the original rule, using an option to enforce or remove)
• html-require-self-closing

Description

Require self-closing syntax (<tag />) in HTML for all elements.

Rationale

While the closing tag might not required in HTML5, it is in JSX/TSX, and also by Prettier which does not have an option to do disallow it.

We prefer having consistency across all our HTML-like code since it's common to switch between them and even copy-and-paste from one to the other.

Examples

✅ Good

<span />
<div />
<section />
<custom-element />

<img src="/logo.png" alt="Logo" />
<input type="text" />
<br />
<hr />

🚫 Bad

<span></span>
<div></div>
<section></section>
<custom-element></custom-element>

<img src="/logo.png" alt="Logo">
<input type="text">
<br>
<hr>

References

• Use void tags for supported elements rather than self-closing prettier/prettier#15336
• https://github.com/Shopify/erb_lint#selfclosingtag