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

Question

我正在寻找一种方法来配置VSCode格式化HTML（和一般的标记文件，如.vue），就像Visual Studio一样。

例如，在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

转到Vs代码中的扩展名并安装html格式。按重新加载按钮，这将有助于格式化您的所有HTML代码

Answer 2

好的，我找到了办法！

我使用的是Beautify extension的1.4.7版本，并且.jsbeautifyrc文件的intellisense有一个模式错位，没有显示属性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"
    }
}

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