HTML void elements (i.e. <input>) are self-closed when .vue documents are formatted

[godefroi]

If I have a template in a .vue file with an HTML void element (for example, an element like this:)

<input type="text" name="myinput">

When I right-click in the editor and choose "Format Document", the element will be changed to this:

<input type="text" name="myinput" />

... which is incorrect; input is an HTML void element, which should not have a closing tag, nor should it be self-closing.

[johnsoncodehk]

This is prettyhtml behavior and it can't not be config, you can check it on https://prettyhtml.netlify.app/.

For your needs I suggest you switch to Prettier for formatting.

[godefroi]

Is there a way to cause volar to use prettier instead of prettyhtml?

[johnsoncodehk]

What the difference between "switch to Prettier extension" and "use Prettier in Volar". 🤣

I deliberately avoid support Prettier in Volar. If we support Prettier in Volar, we need to provide corresponding VSCode settings for Prettier, that was repetitive and confusing because Prettier extension already have it.

[godefroi]

What the difference between "switch to Prettier extension" and "use Prettier in Volar".

I guess that's my question. I don't have the prettyhtml extension installed, and I don't have the prettier extension installed. I do have Volar installed, but that's pretty much it for web development. Neither prettier nor prettyhtml is present in my package.json either. I guess I just assumed that it was Volar that was providing it?

[johnsoncodehk]

Yes Volar have it: https://github.com/johnsoncodehk/volar/blob/116664aaea819dc5b5933ee686f8bb596812a659/packages/vscode-vue-languageservice/package.json#L14-L21

This is to provide a formatter out of the box, but does not support other Prettier features for user. (Sorry if I misunderstand what you mean.)

[godefroi]

So, is there no way to fix the formatting that prettyhtml does? It's currently formatting HTML incorrectly.

[johnsoncodehk]

This is valid in HTML5, see: https://stackoverflow.com/a/3558200

On HTML elements that are designated as void elements (essentially "An element that existed before HTML5 and which was forbidden to have any content"), end tags are simply forbidden. The slash at the end of the start tag is allowed, but has no meaning.

If you think this is a bug and you want this change in Volar but not switch to Prettier, you can open a issue to prettyhtml.

[godefroi]

Ah, ok, I understand, and I was mistaken about HTML5. If I do want to switch volar to Prettier, how do I go about that?

[johnsoncodehk]

See: #53