Visual studio code 奇怪的HTML格式，更漂亮

当我使用内置的格式化程序时，我有。不好的。我希望每个标签都是级联的。这里，我们有span和svg，还有一个在同一行上

使用prettier（）格式化后

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

更漂亮的配置是

我可以使用什么来正确地自动格式化此HTML ?

---

编辑：我通过编辑它的内联配置得到了我想要的。

这就是为什么prettier的格式是这样的。这是一种不破坏内容显示的解决方法。事实上，一旦你习惯了它，它是相当聪明的

您可以使用选项覆盖它

“prettier.htmlWhitespaceSensitivity”：“忽略”，

---

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

您可以通过在

setting.json

文件中放置更漂亮的属性，将更漂亮的格式设置为所有编程语言编辑器的默认格式

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

在我看来，更漂亮的HTML格式看起来并不酷，所以我将它设置为默认VS代码格式

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

如果您想在HTML中添加美化格式扩展名，可以安装美化扩展名，并将此行添加到

setting.json

文件中

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

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

你可以这样做

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

已编辑

全部归功于@Fred

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

"prettier.htmlWhitespaceSensitivity": "ignore"

---

如果可能，请添加代码而不是屏幕截图。@srishtigarg代码是我问题开头的第一个链接。我知道。我更新了我的问题，添加了为什么更漂亮的html格式是这样的。也许这会对你有所帮助。在我看来，beautify对HTML有好处，而prettier对JSX有好处。如果有人知道原因，那么这个问题以前就已经解决了，并在更漂亮的扩展中更新了。也许在将来，它会被解决。事实上，漂亮没有问题。这是一种选择。这个“prettier.htmlWhitespaceSensitivity”：“忽略”。现在它将像Beautify一样格式化。哦，谢谢你，伙计，还有一个问题，为什么你要像格式化代码一样设置更漂亮的属性？这是否意味着你正在定制更漂亮的房产？这比美化要好得多。