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?

Syringe

Answer 1

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.

Ozoniferous

For PhpStorm specifically this works fine!!! But PS still mucks up input:text producing <input:text></input:text>. 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. – Syringe

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. – Ozoniferous

Answer 2

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!

Coenocyte

Answer 3

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.

Accentuation

This solution worked for me using Visual Studio Code as well. Recommended! – Yokoyama

Answer 4

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

Cicatrize

Sergey thanks a million. Yep using Storm. Will try later on. – Syringe

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? – Felicio

Answer 5

Bug?

Looks like a bug with when using input with the nesting operator >

<!-- Expected -->
form>p*4
<form action="">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</form>

<!-- Unexpected -->
form>input*4
<form action=""><input type="text"><input type="text"><input type="text"><input type="text"></form>

<!-- Unexpected, it's not a problem with the form element -->
p>input*4
<p><input type=""><input type="text"><input type="text"><input type="text"></p>

https://github.com/emmetio/emmet-docs/issues/62

Newline insertion in plaintext

On the general question of how produce new lines in Emmet. In markdown or plaintext:

One new line

lorem5*3

...produces ...

Lorem ipsum dolor sit amet.
Labore quasi optio animi omnis?
Beatae modi possimus sed adipisci!

Two new lines

(lorem5+{})*3

... produces ...

Lorem ipsum dolor sit amet.

Velit inventore perferendis repellendus vel.

Voluptates aliquid expedita temporibus nam.

Sard