以VSCode格式设置HTML的格式与Visual Studio相同

Question

I'm searching a way to configure VSCode to format HTML (and markup files in general, such as .vue) in the same way Visual Studio is doing.

In Visual Studio, for instance, if I write something like:

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

I can decide where to break the attribute's line, so if I insert a newline after the class I'll have:

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

Or I can break the line after the id:

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

Etc...

The point is that Visual Studio is aware of the newline I insert, so if I strike CTRL+K, CTRL+D it will actually format my document, but will maintain the newline as I choose, and the attributes at the newline are just aligning to the first attribute in the line of the tag.

That's something I cannot emulate in VSCode, I tried the builtin formatter, Prettier and Beautify...

Is there actually a way to do it?

EDIT

As @Mr_b194 suggested I tried HTML Format extension. Compared to Beautify this one is actually preserving the newlines between attributes, but the first attribute in the new line is just indented (4 chars in my case), resulting not aligned with the upper line:

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

Visual Studio is aligning the 'class' attribute with the 'id' of the line before.

Answer 1

Go to the extension in Vs code and install html format. Press the reload button, this would help to format all your html code

Answer 2

Ok, I found out a way!

I was using the version 1.4.7 of the Beautify extension and there was a schema misalignment for the intellisense of .jsbeautifyrc file that was not showing you all the options for the property wrap_attributes .

I opened an issue on github and the guys where super fast, they've already released the 1.4.8 that correctly shows the preserve-aligned value I was searching.

So, to make it short, you can configure the .jsbeautifyrc file for your project with:

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

And is gonna work.

As I was searching also for .vue support, you can configure Vetur with:

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

And is going to work the same way.