Change built-in HTML formatter from prettyhtml to vscode-html-languageservice

[johnsoncodehk]

In past I have chosen prettyhtml for Volar after comparing some HTML formatters, prettyhtml has always worked fine, but for some reasons I decided to replace the built-in HTML formatter with vscode-html-languageservice in 0.34.0.

• It has only a few known bugs but the repo is not longer maintained so we can't expect bugs to be fixed.
  • HTML void elements (i.e. <input>) are self-closed when .vue documents are formatted #163
  • Automatically formatting attributes in HTML #845
  • How to add custom rules for volar #856
  • Volar wrongly auto-closes some HTML tags  #970
  • Space is removed after '</router-link>' #983
• It is not supported for Namespace Components.
  • Namespace Components are lost on format #722
• vscode-html-languageservice format result has been improved, much better than in the past in my experience.
• vscode-html-languageservice is a built-in dependency of volar, so we don't to add other dependencies for this change.
• With vscode-html-languageservice volar can reuse vscode HTML format settings as much as possible.
• prettyhtml depends on prettier, and prettier does not support on browser, so for Web IDE support I need to use solution other than prettyhtml.

prettyhtml will be migrated to an external plugin (#1027) and I will publish a package for it, for projects wishing to keep using prettyhtml, I will show how to do this. (Please keep an eye on the 0.34.0 changelog)

[reslear]

Good @johnsoncodehk thanks) How will the performance improve?

[johnsoncodehk]

@reslear The text edit range of prettyhtmlreturn is the entire html text, while the text edit range of vscode-html-languageservicereturn is only the actual changed range. In theory, the performance of vscode apply text edits will be improved after switching to vscode-html-languageservice.

But since volar finally merges all text edits into one text edit of the entire vue text, it cannot take advantage of this, maybe it can be improved in the future.

[Dazaer]

Huh, thought it was weird that all my stuff started formatting the wrong way!

Novice here. Any guides on how to configure this new change?

[johnsoncodehk]

@Dazaer see #1174.

[Dazaer]

@Dazaer see #1174.

Thanks! However that would be using prettier-html. I thought the point of this change was for us to use vscode-html-languageservice instead? If possible I'd like to use what's built in but be able to configure it like before.