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?

Answer 1

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:

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

Don’t know if it works in PhpStorm

Answer 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.

Answer 3

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!