奇怪的 HTML 格式与 Prettier

Question

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

\n

\n

用 prettier 格式化后（此版本）

\n

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

\n

\n

更漂亮的配置是

\n

\n

我可以使用什么来正确自动格式化此 HTML\xe2\x80\xaf？

\n

---

\n

编辑：我\xc2\xa0得到了我\xc2\xa0想要的美化扩展并编辑其内联配置。\n

\n

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

\n

您可以使用以下选项覆盖它

\n

"prettier.htmlWhitespaceSensitivity": "ignore",\n

\n

请参阅上面的链接以了解更多相关信息。

\n

Answer 1

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

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

在我看来，Prettier HTML 格式看起来不太酷，因此我将其设置为默认的 VS Code 格式。

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

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

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

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

你可以这样做

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

已编辑

所有功劳均归功于@Fred。

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

"prettier.htmlWhitespaceSensitivity": "ignore"