在 VSCode 中格式化 HTML 的方式与 Visual Studio 相同

Question

我正在寻找一种方法来配置 VSCode 以以与 Visual Studio 相同的方式格式化 HTML（以及一般的标记文件，例如 .vue）。

例如，在 Visual Studio 中，如果我编写如下内容：

<div id="testid" class="test" style="display: block;">
    <p class="p1"></p>
</div>

我可以决定在哪里打破属性的行，所以如果我在类之后插入换行符，我将拥有：

<div id="testid" class="test" 
     style="display: block;">
    <p class="p1"></p>
</div>

或者我可以在 id 后面换行：

<div id="testid" 
     class="test" style="display: block;">
    <p class="p1"></p>
</div>

等等……

关键是 Visual Studio 知道我插入的换行符，所以如果我按 CTRL+K、CTRL+D，它实际上会格式化我的文档，但会保持我选择的换行符，以及换行符处的属性只是与标签行中的第一个属性对齐。

这是我在 VSCode 中无法模拟的，我尝试了内置格式化程序 Prettier 和 Beautify...

真的有办法吗？

编辑

正如@Mr_b194 建议的那样，我尝试了 HTML 格式扩展。与 Beautify 相比，这实际上是保留属性之间的换行符，但新行中的第一个属性只是缩进（在我的情况下为 4 个字符），导致与上线不对齐：

    <div id="testid"
        class="test" style="display: block;">
        <p class="p1"></p>
    </div>

Visual Studio 正在将 'class' 属性与前一行的 'id' 对齐。

Answer 1

好的，我找到了办法！

我使用的是 Beautify extension 的 1.4.7 版，但 .jsbeautifyrc 文件的智能感知架构未对齐，未向您显示属性 wrap_attributes 的所有选项。

我在 github 上打开了一个问题，他们的速度超快，他们已经发布了正确显示我正在搜索的 preserve-aligned 值的 1.4.8。

因此，为了简短起见，您可以为您的项目配置 .jsbeautifyrc 文件：

{
    "preserve_newlines": true,
    "wrap_attributes": "preserve-aligned"
}

并且会工作。

当我也在搜索 .vue 支持时，您可以使用以下方式配置 Vetur：

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "preserve_newlines": true,
        "wrap_attributes": "preserve-aligned"
    }
}

并且将以同样的方式工作。

Answer 2

进入Vs代码中的扩展，安装html格式。按下重新加载按钮，这将有助于格式化所有的 html 代码