6

Everywhere I see people use Emmet abbreviations in VS Code the behavior of the code editor is the same. If someone puts the following code,

a:link*3

The result is the following

<a href="http://"></a>
<a href="http://"></a>
<a href="http://"></a>

Yet when I try it within my own copy of VS Code it seems to distribute them without a return on the same line.

<a href="http://"></a><a href="http://"></a><a href="http://"></a>

Is there any way to modify this behavior within the setting? I'm not sure if it matters but I'm on version 1.53.0-exploration on an Apple M1 MBA.

Kyle J
  • 93
  • 1
  • 4

3 Answers3

7

try this solution, it worked for me:

go to settings.json and apply this setting:

"emmet.syntaxProfiles": {

    "html": {
        //if element created is more than 2, it will break to new line for each element
        "inline_break": 2,
    }
}

i read it from the documentation:

inline_break: how many inline elements are needed to force line break, number. The default value is 3. For example, span2 will be expanded into , but span3 will create three elements, each on a new line. Set this option to 0 to disable line breaks for inline elements.

https://docs.emmet.io/customization/syntax-profiles/#create-your-own-profile

Tai
  • 71
  • 2
7
"emmet.preferences": {
  "output.inlineBreak": 1
}

This appears to be the better technique, see https://github.com/microsoft/vscode/issues/119088#issuecomment-811297787 as the emmet.syntaxProfiles and inline_break isn't actually supported by emmet itself but an addition in vscode. So it may be deprecated at some point in favor of emmet.preferences approach.

Mark
  • 143,421
  • 24
  • 428
  • 436
1

I believe that's the behaviour for inline elements.

See for example span*3, it will also expand them inline.

<span></span><span></span><span></span>

For block elements, however, the result is different as in this p*3:

<p></p>
<p></p>
<p></p>
Guillermo Brachetta
  • 3,857
  • 3
  • 18
  • 36