CODEWITHSUNDEEP
visual-studio-code
ms86
ms86

Reputation: 227

visual studio code: change angle brackets html formatting

May I ask you if it's possible to change the html formatting in VSC regarding the closure of the angle bracket of the start stag ?

currently my formatter produce:

  <button
    type="button"
    class="btn btn-default"
    (click)="activeModal.close()"
    translate
  >
    common.discardBtn
  </button>

that's horrible

I would like this result:

  <button
    type="button"
    class="btn btn-default"
    (click)="activeModal.close()"
    translate>
    common.discardBtn
  </button>

How can I avoid the new line of the angle bracket ?

UPDATE @ChrisR I've already tried
"html.format.wrapAttributes": "force", but it does not work

Upvotes: 4

Views: 2026

Answers (2)

kosmos
kosmos

Reputation: 380

Are you sure this is Visual Studio Code and not an extension such as prettier? I found the same issue and a simple test to turn off prettier on an element would show if its the same issue. 

<!-- prettier-ignore  -->
<button
    type="button"
    class="btn btn-default"
    (click)="activeModal.close()"
    translate>
    common.discardBtn
</button>

It looks like it was discussed, but possibly never fixed here: https://github.com/prettier/prettier/issues/1825

I turned off prettier for html in my settings.json

"prettier.disableLanguages": ["html"]

Upvotes: 1

ChrisR
ChrisR

Reputation: 4008

The setting is :

"html.format.wrapAttributes": "force".

The reason why the angle bracket of the first tag is set to a new line is because when your code is versioned (with Git for example) and you add or remove attributes, less lines will be modified than with your preferred solution.

You'll find that the "horrible" format is pretty common in the developer world. =)

Upvotes: 0

Related Questions