用Emmet包装和内包装HTML

Question

使用WebStorm或PhpStorm，有什么方法可以通过Emmet或其他魔法来提高生产力吗？

1. 从文本编辑器或电子邮件中粘贴一些多行文本： 项目1项目2项目3项目4 让每一行都封装在(比如说，<li> )中
2. 有一些<li>项目，

我发现自己需要这样的生产力提升，Emmet是我的第一个嫌疑人，但我的尝试失败了。

Answer 1

在PhpStorm 8中，您可以这样做：

代码->环绕(您可以使用CTRL + SHIFT + T) -> Emmet。您将得到可以编写ul>li*以完成此任务的字段。

为了获得更高的效率，您需要快速访问该工具。您可以这样做:转到“文件设置”( File -> Settings -> Keymap )，查找“环绕Emmet”(有搜索行)，并为此操作添加首选的keybord快捷方式。

干杯!

Answer 2

假设你想要一个<nav>，里面有一个<ul>，在里面想为每个项目有一个<li>标签，在每个<li>里面有一个<a>标记(带有href="#")。每个<a>标记都直接包装一项。

在括号+ Emmet中，我这样做，

选择项目列表，例如

one
two
three
four
five
six

按ctrl+shift+a (此快捷方式在括号内工作，其他编辑器可能有另一个快捷方式)进入emmet的缩写模式，并键入nav>ul>li>a[href="#"]*。生成的代码如下所示

    <nav>
    <ul>
        <li>
            <a href="#">one</a>
            <a href="#">two</a>
            <a href="#">three</a>
            <a href="#">four</a>
            <a href="#">five</a>
            <a href="#">six</a>
        </li>
    </ul>
</nav>

记住，*在缩写的末尾很重要，否则emmet会认为您想把所有的项目都包装在一个<a>标记中。

编辑:如果你在li之后加上'*‘，而不是像这个nav>ul>li*>a[href="#"]那样，在大多数情况下你会得到更漂亮的结果，这意味着每个<a>都会被自己的<li>封装。

<nav>
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
    </ul>
</nav>

Answer 3

在php中使用：

CTRL + ALT +T

从菜单中选择emmet并编写代码.