Emmet abbreviation syntax multiplication puts all elements on same line instead of multiple?

user_15201047 0
Viewed 2545

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.

emmet visual-studio-code html
3 Answers

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

user_152482310
user_8363300

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>
user_128884700
Related