艾美特新系列

时间:2015-09-30 22:47:03

标签: newline emmet

我是Emmet的新手(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,但效果不明显。

有没有办法强制换行?

5 个答案:

答案 0 :(得分:3)

看起来你正在使用拥有它自己的Emmet实现的PhpStorm。 官方Emmet(例如Sublime Text)生成了很好的HTML代码。

无论如何,您的兴趣点是:

    来自syntax profile设置的
  1. inline_break选项。
  2. 尝试在文本节点中使用${newline}变量,例如input:email+{${newline}}+input:tel
  3. 不知道它是否适用于PhpStorm

答案 1 :(得分:1)

我遇到了同样的问题,只是接受的解决方案对PhpStorm没有帮助。

在PhpStorm中,必须从PhpStorm设置的特定列表中删除要换行的HTML标记。您可以在首选项>编辑器>代码样式> HTML>其他>内联元素中找到它:删除输入或不需要内联的任何其他元素,瞧!下次使用emmet时,您的代码将看起来很干净。

答案 2 :(得分:1)

像之前的答案一样,被接受的解决方案对我不起作用,所以

在我的案例中,我在同级HTML元素之间添加了一对括号:

usort($sonuc['rec'], function($a, $b) {
    return 1 == $a['m_unseen'] ? -1 : 1;
});

变成了:

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

我希望有人觉得它有用!

答案 3 :(得分:0)

我在这里给出了答案(不确定是否可以在您的编辑器上使用!!!这在Editplus(editplus.com)中有效) https://stackoverflow.com/a/61478321/5781320

答案 4 :(得分:0)

对我来说,我将* 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>