奇怪的 HTML 格式，更漂亮

Question

当我使用内置格式化程序时，我有 this HTML。不好。我希望每个标签都被级联。在这里，我们有 span 和 svg 以及 a 在同一行。

使用 prettier (this version) 格式化后

我明白了。这几乎更糟。 （请参阅后面的编辑部分，解释为什么它实际上是 prettier 的明智选择。）

更漂亮的配置是

我可以使用什么来正确地自动设置此 HTML 的格式？

---

编辑：Beautify extension 得到了我想要的内容并编辑了它的内联配置。

Here 就是为什么 prettier 像这样格式化的原因。这是一种不破坏内容显示的解决方法。其实习惯了就很聪明了。

您可以使用选项覆盖它

"prettier.htmlWhitespaceSensitivity": "ignore",

查看上面的链接以了解更多信息。

Answer 1

通过在 setting.json 文件中放置更漂亮的属性，您可以将更漂亮的格式设置为所有编程语言的编辑器的默认格式。

"editor.defaultFormatter": "esbenp.prettier-vscode",

在我看来，更漂亮的 HTML 格式看起来不太酷，所以我将其设置为默认的 VS Code 格式。

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},

如果您想要 HTML 的 Beautify 格式扩展，您可以安装 Beautify 扩展并将此行添加到 setting.json 文件中

"[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
}

同样，您可以为不同的语言设置不同的格式扩展。在我看来，这是将格式扩展设置为一种或多种语言的标准方法。

你可以这样做

"beautify.language": {
    "html": ["html", "php", "erb"],
},

已编辑

感谢@Fred。

您可以通过以下属性在 prettier 中实现与 beautify 扩展相同的行为。

"prettier.htmlWhitespaceSensitivity": "ignore"