Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to format HTML code in VScode ?

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 !

like image 410
Margaux Masson Avatar asked Oct 03 '17 22:10

Margaux Masson


People also ask

How do I beautify HTML code in VS Code?

To improve the formatting of your HTML source code, you can use the Format Document command Ctrl+Shift+I to format the entire file or Format Selection Ctrl+K Ctrl+F to just format the selected text. The HTML formatter is based on js-beautify.

How do I arrange code in VS Code?

The code formatting is available in Visual Studio Code (VSCode) through the following shortcuts or key combinations: On Windows Shift + Alt + F. On macOS Shift + Option + F. On Linux Ctrl + Shift + I.


Video Answer


2 Answers

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

like image 192
Jon Uleis Avatar answered Nov 04 '22 17:11

Jon Uleis


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.

like image 31
Yerkon Avatar answered Nov 04 '22 17:11

Yerkon