Volar wrongly auto-closes some HTML tags

[mariusa]

Hi and hope you are getting better!

VSCode auto-closing tags works fine on .html files. It considers which elements are valid
https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br

eg it leaves <br> alone.

Volar changes <br> to <br /> on save. (found out by disabling all other extensions)

Please let VSCode handle the HTML inside <template> for .vue files, as it already has all kinds of rules which work fine.

[yaegassy]

The built-in formatter feature of volar uses prettyhtml for <template>.

It is the behavior of prettyhtml that <br> becomes <br /> when saved. There is no option to control this behavior in prettyhtml, so it may not be easy to deal with.

Also, it may be a more difficult approach to have the formatting features of VSCode's html language feature used only for the <template> part.

[mariusa]

it may be a more difficult approach to have the formatting features of VSCode's html language feature used only for the <template> part.

I see. Is there something missing in the vscode API that the team could help with? eg implement an API to format some code similar to what prettyhtml provides. I'm sure other extensions would use this too, since it's built-in.

[yaegassy]

Volar formatter is designed to be used out of the box. If you want to use more custom rules, it is recommended to use prettier or other formatter extensions.

As a side note, <br> becomes <br /> even when using prettier.

You may want to find a formatter extension that matches your expected behavior. (Or you may need to develop your own formatter extension)

• Tips #53
  • See: "Formatting tab size config & Change formatter"

[johnsoncodehk]

it may be a more difficult approach to have the formatting features of VSCode's html language feature used only for the <template> part.

I see. Is there something missing in the vscode API that the team could help with? eg implement an API to format some code similar to what prettyhtml provides. I'm sure other extensions would use this too, since it's built-in.

Hi @mariusa, I have tries customize vscode-html-languageservice format settings and yes it can't imitate prettyhtml, in my experience prettyhtml is much better then vscode-html-languageservice / Prettier with html formatting with out of box usage so we choice it.

[mariusa]

Hi Johnson,

Would this be possible to implement
microsoft/vscode#145147

or it also depends on completely replacing prettyhtml with vscode-html-languageservice ?

Thanks!

[johnsoncodehk]

Just have a quick look, I think we have supported js/ts.implicitProjectConfig.checkJs already: https://github.com/johnsoncodehk/volar/blob/26b68b6852546285d6066536d5425de9ef8634c1/packages/vue-language-server/src/inferredCompilerOptions.ts#L10-L11

But why you mention prettyhtml? This is not related to js/ts.implicitProjectConfig.checkJs. Btw you can also change html formatter yourself now. See #1027.

[mariusa]

I think we have supported js/ts.implicitProjectConfig.checkJs already:

Fantastic news, thanks! So in the next release, volar will apply vscode checks for js/ts inside <script> ?
For example, abc = 2 will show a warning for undefined var, as in .js/.ts files?

In the current version this doesn't work yet:

Marketplace Info
Last updated
14/03/2022, 20:34:12

[mariusa]

This works fine now with latest release, which changed prettyhtml to vscode formatter :D