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 !
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.
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.
Setting the VSCode preference html.format.wrapAttributes
to force
will accomplish the formatting from your example.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With