Description
| What | Example | Outcome |
|---|---|---|
| Missing closing tag | <div> |
<div></div> |
| "Self-closing" non-void element | <div/> |
<div /> |
| Missing start tag | </div> |
SyntaxError: Unexpected closing tag "div". |
As far as I know, leaving the end tag out for <div> is not allowed. <div/> gets treated as <div> (start tag only, the / is ignored), but is still invalid. </div> is invalid for sure.
In other words – sometimes Prettier throws errors for invalid HTML (</div>), sometimes it preserves input (<div />) and sometimes it … fixes the HTML(?) (<div>).
What should happen though?
The reason I bring this up is because I was thinking about #5246 which discusses whether void elements should have a slash or not (<input> vs <input />). One argument brought up for <input> was that the other syntax (<input />) could fool developers into thinking that <div /> is valid syntax for an empty div. Then I was thinking – "Wait, that wouldn't be a problem, because Prettier would throw an error on <div />" and went to the playground to try it out. Nope. No error.
Related: #5665 (which discusses whether Prettier should add missing closing tags).
Notes:
- Regardless of what we do,
<p>should still be valid and become<p></p>, since p tags have optional end tags. - Custom elements are never void and have required end tags, right?
@ikatyang Since you know the HTML parser best – do you have any thoughts?
One idea is to throw errors for unclosed tags and illegal "self-closing" tags. I think that would be helpful, since mistakes would be pointed out early. Also, Prettier can't really know where to insert a missing end tag. But would this break stuff for somebody?