How to format HTML code in VScode ?

Question

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 !

Darth Demono · Accepted Answer · 2021-09-13 17:46:33Z

5

You can also use it with combination of html.format.wrapLineLength.

"html.format.wrapLineLength": 80,
"html.format.wrapAttributes": "auto",

In this case, attributes starts wrapping when line length exceeds 80. It's useful when you have many attributes and it will fill the empty spaces on the right.

edited Sep 13, 2021 at 17:46

Darth Demono

34 bronze badges

answered Mar 29, 2018 at 5:53

Yerkon

4,8182 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Uleis · Accepted Answer · 2017-10-03 22:17:41Z

4

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

answered Oct 3, 2017 at 22:17

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

Comments

Travis Peterson · Accepted Answer · 2022-07-11 21:25:27Z

1

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>

answered Jul 11, 2022 at 21:25

Travis Peterson

4204 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to format HTML code in VScode ?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related