htmlnewlineemmet

New lines in Emmett


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?


Solution

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