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

Question

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

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

这是我非常想拥有的一项功能！

Answer 1

有不同的 "formatter" 扩展，但我发现其中一个扩展可以很好地满足您正在寻找的格式。它叫做“vscode-tidyhtml”。

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

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

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

Answer 2

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

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

--或--

"html.format.wrapAttributes": "force"

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

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

Answer 3

我的扩展 html 受到 "Prettier: Print width" 设置的限制，我想我应该将随机值设为 0，但随后所有标签都开始破坏属性。所以他投入了10,000。这解决了我的问题。

Answer 4

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

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

Answer 5

您应该打开 settings.json 文件（shift+cmd+p for mac）并单击“打开首选项：打开设置”(JSON)

在 JSON 文件的开头添加以下行：

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

如果格式化仍然无效（这是另一个问题），请搜索 HTML 并添加以下行

"[html]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

关闭并打开 vscode 然后使用 (option+Shift+F)

格式化

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

Format html code in Visual Studio Code such that attributes are on separate lines?

html

formatting

visual-studio-code