Is there any shortcut/hotkey in vscode to format attributes of an html element

Question

I have this code of element, and i need to format the attributes from this:

<input class="cool-input" id="input" value="test" placeholder="test" />

to

<input class="cool-input"
  id="input"
  value="test"
  placeholder="test"
/>

but I didn't find any hotkey to do it. Is there any, and if there is, what is it?

score 0 · Accepted Answer · answered Mar 06 '22 at 19:43

0

Try this setting:

HTML > Format: Wrap Attributes set to force

and then select your line:

<input class="cool-input" id="input" value="test" placeholder="test" />

and trigger the command Format Selection and you will get:

<input class="cool-input"
  id="input"
  value="test"
  placeholder="test" />

answered Mar 06 '22 at 19:43

Mark

score 0 · Answer 2 · answered Dec 28 '22 at 09:20

0

The Prettierextension is the best way to format codes.

answered Dec 28 '22 at 09:20

metin.kucukflow

score -2 · Answer 3 · edited Mar 08 '22 at 16:32

-2

Installing an VSCode extension can help too. Here's one Prettier – Code formatter

Can be set up to format on save and Format on selection. The Doc has a very detailed how to guide.

edited Mar 08 '22 at 16:32

j08691

answered Mar 06 '22 at 18:55

Michael Amadi

This thing formats the whole document, but I need to format only 1 document, so first method is irrelevant, and if second method, then what extension? – rllynotfox Mar 06 '22 at 18:59
@rllynotfox, how do you mean whole document? It only gets to format on-save, that is, when you save the current file you're on, not all the documents. – Michael Amadi Mar 06 '22 at 19:27
Sorry my grammar died when I wrote it – rllynotfox Mar 08 '22 at 14:42

3 Answers3