埃米特的新线路答案

【问题标题】：New lines in Emmett埃米特的新线路
【发布时间】：2015-12-28 20:52:00
【问题描述】：

我是 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，但没有明显效果。

那么有没有办法强制换行呢？

【问题讨论】：

标签： html newline emmet

【解决方案1】：

看起来你正在使用 PhpStorm，它有自己的 Emmet 实现。官方 Emmet（例如在 Sublime Text 中）可以生成漂亮的 HTML 代码。

无论如何，您的兴趣点是：

inline_break 选项来自 syntax profile 设置。
尝试在文本节点中使用${newline} 变量，例如input:email+{${newline}}+input:tel

不知道在 PhpStorm 中是否有效

【讨论】：

谢尔盖感谢一百万。是的，使用风暴。稍后会尝试。
当我尝试扩展 .classname{${newline}...${newline}}*3 时，我在 Sublime Text 3 中关闭 div 时缩进很差。有什么想法吗？

【解决方案2】：

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

在 PhpStorm 中，您必须从 PhpStorm 设置中的特定列表中删除您想要在新行中添加的 HTML 标记。您可以在 Preferences>Editor>Code Style>HTML>Other>Inline 元素中找到它： 删除输入或任何其他您不想要 inline 的元素，瞧！下次你使用 emmet 时，你的代码会看起来很干净。

【讨论】：

对于 PhpStorm，这很好用！！！但是 PS 仍然搞砸了 input:text 产生 <input:text></input:text>。事实上，整个 Emmet 的实现似乎很糟糕，但至少新行问题已经解决了 :-) 感谢和抱歉迟到了。
谢谢。没问题。我同意，至少在我在 PhpStorm 中使用 Emmet 的时候。您可以使用inp 代替input:text。在最新版本的 PyCharm 中工作，也应该在 PhpStorm 中工作。产生相同的结果，而且要短得多。

【解决方案3】：

和上一个答案一样，接受的解决方案对我不起作用，所以

在我的例子中，我在同级 HTML 元素之间添加了一对括号：

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

变成了：

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

我希望有人觉得它有用！

【讨论】：

【解决方案4】：

对我来说，我把 *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>

【讨论】：

这是 emmet 默认的工作方式，li 是块元素，问题是如何在新行中添加像 a 和 input 这样的内联元素
你看我的回答了吗？第一个在单行上，第二个在多行上。这正是 OP 所要求的，但它可以帮助其他人，这就是 SO 的工作方式。