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

【问题标题】：Format html code in Visual Studio Code such that attributes are on separate lines?在 Visual Studio Code 中格式化 html 代码，使属性位于不同的行上？
【发布时间】：2016-02-07 05:04:13
【问题描述】：

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

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

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

【问题讨论】：

这真的很棒，我在 github 中创建了一个问题，也许它会被考虑。 github.com/Microsoft/vscode/issues/2204
这似乎是 this question, 的重复（我不想这么说...），并且可能在编写方式上有点偏离主题。如果我错了，请纠正我;)
这个是关于Visual Studio Code，另一个是Visual Studio。不同的编辑器，不同的设置，相同的供应商。
强调“内容”有自己的一行，前面没有“>”字符。

标签： html formatting visual-studio-code

【解决方案1】：

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

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

--或--

"html.format.wrapAttributes": "force"

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

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

【讨论】：

不幸的是，这是一个错过（对我来说）。他们应该添加一个换行阈值。有时您的模板又好又短，因此属性可以保留在一行中。
force-expand-multiline 是我现在最好的选择
但是当我保存文件时它会在一行中转换

【解决方案2】：

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

【讨论】：

【解决方案3】：

有不同的“格式化程序”扩展名，但我发现有一个可以很好地处理您正在寻找的这种确切格式。它被称为“vscode-tidyhtml”。

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

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

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

【讨论】：

它删除了 AngularJs 指令。

【解决方案4】：

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

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

【讨论】：

这个问题是，一旦你保存文件，VSCode 就会再次将属性放回原处。

【解决方案5】：

您应该打开 settings.json 文件（对于 mac 是 shift+cmd+p）并点击 Open Preference: Open Settings (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) 格式化

【讨论】：