在Visual Studio Code中格式化html代码，使属性位于单独的行上？

Question

似乎缺少vscode的格式设置。我希望能够格式化html，以便我的html显示为：

<div attrib1=value1
     attrib2=value2
     attrib3=value3>
  Content
</div>

这是我真的很想拥有的功能！

Answer 1

VSCode现在添加了执行此操作的方法。您可以编辑settings.json（ctrl + shift + p），然后添加以下内容以获得所需的效果：

"html.format.wrapAttributes": "force-aligned"

-或-

"html.format.wrapAttributes": "force"

强制对齐还将添加缩进以使其与打开标签的行上的属性对齐。

访问this link了解更多详细信息或更新。

Answer 2

有不同的“ formatter”扩展名，但是我发现一个扩展名确实可以满足您所寻找的确切格式要求。它称为“ vscode-tidyhtml”。

https://marketplace.visualstudio.com/items?itemName=anweber.vscode-tidyhtml

1. 单击左侧的扩展程序图标
2. 搜索并安装“ vscode-tidyhtml”，重新加载Visual Studio代码
3. 按“ F1”键，然后键入“ TidyHtml”，按回车

它应该格式化HTML，以便属性位于不同的行上。我不确定它是否适用于其他文件类型。

Answer 3

我的扩展html受“更漂亮：打印宽度”设置的限制，我以为我会将一个随机值设置为0，但随后所有标记开始破坏属性。所以他投入了10,000。这解决了我的问题。