New lines in Emmett

Question

I am brand new to Emmet (18 hours) it is GREAT. I have looked widely but cannot find a way of adding new lines when not added automatically.

.container>.row>.col-sm-3>ul>li#abc$*5

gives

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <ul>
                <li id="abc1"></li>
                <li id="abc2"></li>
                <li id="abc3"></li>
                <li id="abc4"></li>
                <li id="abc5"></li>
            </ul>
        </div>
    </div>
</div>

super easy to work on in PhpStorm or Sublime etc. But

.containter>.row>.col-sm-offset-4>form>(input:text)*5+input:email+input:tel

give a very messy

<div class="containter">
    <div class="row">
        <div class="col-sm-offset-4">
            <form action=""><input type="text" name="" id=""><input type="text" name="" id=""><input type="text"
                                                                                                          name=""
                                                                                                          id=""><input
                    type="text" name="" id=""><input type="text" name="" id=""><input type="email" name=""
                                                                                          id=""><input type="tel"
                                                                                                        name="" id="">
            </form>
        </div>
    </div>
</div>

OK it is fairly straighforward to sort out by selecting the >< but silly.

I tried inserting /n in various places but to no obvious effect.

So is there a way of forcing a new line?

score 7 · Answer 1 · answered Mar 21 '20 at 13:17

Like the previous answer, the accepted solution didn't work for me, so

in my case, I added a pair of parentheses between the sibling HTML elements:

p{Content 1}+{}+p{Content 2}

which turned into:

<p>Content 1</p>
<p>Content 2</p>

I hope someone finds it useful!

score 4 · Answer 2 · answered Jul 16 '22 at 18:13

4

I recently had a similar issue, and want all my completions to make line-breaks. Working in VS Code (dunno if other editors have comparable settings) I went to my settings.json file and inside "emmet.preferences" put "output.inlineBreak": 1. This basically says "If you have one object in a nested region, give it a line break." If you set it to two, then it'll only linebreak when two objects are in a nested region. The default is 3.

answered Jul 16 '22 at 18:13

Addem

3,635
3
35
58

This solution worked for me using Visual Studio Code as well. Recommended! – Ricardo Maroquio Nov 16 '22 at 13:43

score 3 · Answer 3 · answered Oct 01 '15 at 14:53

3

Looks like you’re using PhpStorm which has it’s own Emmet implementation. Official Emmet (in Sublime Text, for example) produces nice HTML code.

Anyways, your points of interests are:

inline_break option from syntax profile settings.
Try to use ${newline} variable in text node, e.g. input:email+{${newline}}+input:tel

Don’t know if it works in PhpStorm

answered Oct 01 '15 at 14:53

Sergey Chikuyonok

2,626
14
13

Sergey thanks a million. Yep using Storm. Will try later on. – BeNice Oct 01 '15 at 16:51
When I tried to expand ``.classname{${newline}...${newline}}*3`` I got really poor indentation on the closing of the div in Sublime Text 3. Any ideas? – Jay Mar 03 '20 at 20:15

score 2 · Accepted Answer · answered Jun 19 '18 at 12:16

2

I had the same problem, only the accepted solution didn't help me for PhpStorm.

In PhpStorm you have to remove the HTML tag you want on a new line from a specific list in your PhpStorm settings. You can find it at Preferences>Editor>Code Style>HTML>Other>Inline elements: Remove input or any other element you don't want inline and voila! Next time you use emmet your code will look nice and clean.

answered Jun 19 '18 at 12:16

Jelmer Brands

192
2
9

For PhpStorm specifically this works fine!!! But PS still mucks up `input:text` producing ``. The whole Emmet implementation seems pretty buggered in fact but at least the new line problem is solved for this :-) Thanks and sorry for the late recognition. – BeNice Oct 30 '20 at 12:05
Thanks. No problem. I agree, at least at the time I used Emmet in PhpStorm. You can use `inp` instead of `input:text`. Works in the latest version of PyCharm, should also work in PhpStorm. Produces the same result and is a lot shorter. – Jelmer Brands Nov 03 '20 at 18:05

New lines in Emmett

4 Answers4

Linked