在Visual Studio Code中格式化html代码，使属性在不同的行上？

Question

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

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

这是我真正喜欢的一项功能！

Answer 1

VSCode现在添加了一种方法。 您可以编辑设置，然后添加以下效果：

＆＃34; html.format.wrapAttributes＆＃34;：＆＃34;强制对齐＆＃34;

- 或 -

＆＃34; html.format.wrapAttributes＆＃34;：＆＃34; force＆＃34;

force-aligned还会添加缩进以使其与打开标记的行上的属性对齐。

访问this link了解更多详情或更新。

Answer 2

有不同的＆＃34;格式化程序＆＃34;扩展，但我找到了一个你正在寻找的这种确切格式的体面工作。 它被称为＆＃34; vscode-tidyhtml ＆＃34;。

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

1. 点击左侧的“扩展程序”图标
2. 搜索并安装＆＃34; vscode-tidyhtml＆＃34;，重新加载Visual Studio代码
3. 点击＆＃34; F1＆＃34;键，然后键入＆＃34; TidyHtml＆＃34;，点击输入

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

Answer 3

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

Answer 4

我知道这已经晚了，但我也是来这里寻找答案的。正如@adi518 所提到的，为此使用 vscode 自动格式化可能不是一个好主意。

因此，要在您喜欢的地方执行此操作，此扩展程序可能会有所帮助： https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes