Новые строки в Эмметте

Я новичок в Эммете (18 часов), это ВЕЛИКОЛЕПНО. Я много искал, но не могу найти способ добавления новых строк, если они не добавляются автоматически.

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

дает

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

очень легко работать в PhpStorm или Sublime и т. д. Но

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

дать очень грязный

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

Хорошо, довольно просто разобраться, выбрав ><, но глупо.

Я пробовал вставлять /n в разные места, но без видимого эффекта.

Так есть ли способ заставить новую строку?


newline emmet
person BeNice    schedule 30.09.2015    source источник

Ответы (4)


arrow_upward
2
arrow_downward

У меня была такая же проблема, только принятое решение не помогло мне для PhpStorm.

В PhpStorm вы должны удалить нужный тег HTML в новой строке из определенного списка в настройках PhpStorm. Вы можете найти его в разделе Настройки>Редактор>Стиль кода>HTML>Другое>Встроенные элементы: Удалите ввод или любой другой элемент, который вы не хотите использовать в качестве встроенного, и вуаля! В следующий раз, когда вы будете использовать emmet, ваш код будет выглядеть красиво и чисто.

person Jelmer Brands    schedule 19.06.2018
comment
В частности, для PhpStorm это работает отлично!!! Но PS по-прежнему портит input:text, производя <input:text></input:text>. На самом деле вся реализация Emmet кажется довольно глючной, но, по крайней мере, проблема с новой строкой решена для этого :-) Спасибо и извините за позднее признание. - person BeNice; 30.10.2020
comment
Спасибо. Без проблем. Я согласен, по крайней мере, в то время, когда я использовал Emmet в PhpStorm. Вы можете использовать inp вместо input:text. Работает в последней версии PyCharm, также должен работать в PhpStorm. Дает тот же результат и намного короче. - person Jelmer Brands; 03.11.2020

arrow_upward
3
arrow_downward

Похоже, вы используете PhpStorm со своей собственной реализацией Emmet. Официальный Emmet (например, в Sublime Text) создает хороший HTML-код.

В любом случае, ваши интересы:

  1. inline_break из настроек профиля синтаксиса.
  2. Попробуйте использовать переменную ${newline} в текстовом узле, например. input:email+{${newline}}+input:tel

Не знаю, работает ли это в PhpStorm

person Sergey Chikuyonok    schedule 01.10.2015
comment
Сергей спасибо миллион. Да, используя Шторм. Попробую позже. - person BeNice; 01.10.2015
comment
Когда я попытался расширить .classname{${newline}...${newline}}*3, я получил очень плохой отступ при закрытии div в Sublime Text 3. Есть идеи? - person Jay; 03.03.2020

arrow_upward
3
arrow_downward

Как и в предыдущем ответе, принятое решение у меня не сработало, поэтому

в моем случае я добавил пару круглых скобок между родственными HTML-элементами:

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

который превратился в:

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

Я надеюсь, что кто-то найдет это полезным!

person Rafael VC    schedule 21.03.2020

arrow_upward
1
arrow_downward

Лично я поставил *3 снаружи, а не внутри.

ul>li>a*3 производит:

   <ul>
     <li><a href=""></a><a href=""></a><a href=""></a></li>
   </ul>

ul>li*3>a производит:

    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
person Neo V2RNA59Z    schedule 30.10.2020
comment
Вот как emmet работает по умолчанию, li — это блочный элемент, вопрос задавался, как встроенные элементы, такие как a и input, могут быть добавлены в новую строку. - person Rod911; 19.05.2021
comment
Вы читали мой ответ? Первый находится в одной строке, а второй - в нескольких строках. Это именно то, о чем просил OP, но это может помочь кому-то еще, как работает SO. - person Neo V2RNA59Z; 20.05.2021