How to format HTML code in VScode ?

user_8412853 0
Viewed 4584

I would like to find a way to format HTML in VScode, such as fro example, if I have a long div like this one: 

<div class="signal-item-icon checkbox-signal signal-icon" [class.selected]="signal.isSelectedCheckSign" (click)="$event.stopPropagation(); onSelectOneShadowSignal(signal);">

I want it to be displayed like this when I do ctrl+shift+i: 

<div class="signal-item-icon checkbox-signal signal-icon" 
     [class.selected]="signal.isSelectedCheckSign" 
     (click)="$event.stopPropagation(); 
     onSelectOneShadowSignal(signal);">

Do you if it is possible? Is there an extension VScode that exists for this kind of implementation?

Thank you !

visual-studio-code formatting html
3 Answers

Setting the VSCode preference html.format.wrapAttributes to force will accomplish the formatting from your example.

user_45734100

I think a better solution would be to use the VSCode html.format.wrapAttributes option of force-aligned. This doesn't blur the line between the next nested object and your attributes of your parent. (In most cases).

force

<form attribute1="value" 
  attribute2="othervalue">
  <div></div>
</form>

force-aligned

<form attribute1="value" 
      attribute2="othervalue">
  <div></div>
</form>

In my opinion, the first option makes it harder to find the div inside the form. And I've seen it cause many developers headaches when this happens.

<form attribute1="value">
  attribute2="othervalue"
  <div></div>
</form>
user_41996330
Related