visual studio code: change angle brackets html formatting

user_6925065 0
Viewed 1429

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

vscode-settings visual-studio-code
2 Answers

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"]
user_14489890

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. =)

user_85754990
Related