Question

使用WebStorm或PhpStorm，有没有办法通过Emmet或任何其他魔法来提高效率？

从文本编辑器或电子邮件中粘贴一些多行文字：
```
Item 1
Item 2
Item 3
Item 4
```
将每一行包裹起来，比如<li>？
```
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
```

拥有一些<li>项，

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>

使用<a href="#"> ... </a>？

对文本进行内部包装

<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>

我发现自己需要提高效率，Emmet是我的第一个嫌疑人，但我的尝试失败了。

Answer 1

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

代码 - ＆gt;环绕（可以使用CTRL + SHIFT + T） - ＆gt;埃米特。您将获得可以编写ul>li*以完成此任务的字段。

为了提高工作效率，您需要快速访问此工具。你可以这样得到它：转到文件 - ＆gt;设置 - ＆gt;键盘映射，使用Emmet查找环绕声（有一条搜索行）并为此操作添加首选键盘快捷键。

干杯！

Answer 2

假设你想要一个<nav>，里面想要<ul>，里面想要每个项目有<li>个标签，在你想要的<li>内{ {1}}标签（带有href =“＃”）。每个<a>标记直接包装一个项目。

在Brackets + Emmet中我做了如下，

选择项目列表，例如

<a>

按ctrl + shift + a（此快捷键在括号中工作，其他编辑器可能有另一个快捷键）进入emmet的缩写模式，然后键入one two three four five six。结果代码如下

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会认为您想将所有项目包装在一个*标记中

编辑：如果你把li之后的'*'放在最后（就像这个<a>），你会在大多数情况下得到更加漂亮的结果，这意味着每个nav>ul>li*>a[href="#"]将被包裹在它自己的{{1}中}}

<a>

Answer 3

我只知道如何做到这一点是Sublime + Emmet，但是：

对于＃1，选择原始多行文字。

点击Ctrl + Shift + L（Mac上为Cmd）将每一行分开作为选择
Ctrl + Alt + Enter进入缩写模式。
输入li作为缩写，将每行内容包装在<li>标记中。

＃2
输入li>a[href=#]作为缩写。我建议使用一个简单的li>a，因为光标将在那里输入正确的url引用，除非你可以输入一个简单的规则。

注意：请务必检查您的密钥绑定，因为您明确使用的是与我不同的IDE，您需要知道如何在PHPStorm等中使用多个光标/行选择（如果可能的话）。

此外，在此特定示例中，请务必注意包装的内容将显示为最后。

这意味着像li*3这样的东西会给你12个项目，只有4个内容。内容将出现在最后一项（本例中每第4项），因此请注意多行线，多光标工作流程。

Answer 4

在php风暴中使用：

CTRL + ALT + T

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

使用Emmet包装和内包HTML

4 个答案: