CODEWITHSUNDEEP
htmlvue.jsvisual-studio-codeformat
tanathos
tanathos

Reputation: 5606

Format HTML in VSCode the same way as Visual Studio

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.

Upvotes: 3

Views: 3136

Answers (2)

tanathos
tanathos

Reputation: 5606

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.

Upvotes: 2

Bishal Ghimire
Bishal Ghimire

Reputation: 687

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

Upvotes: 0

Related Questions