phpstorm - 使用 Emmet 包装和内包装 HTML

Question

使用 WebStorm 或 PhpStorm，是否有任何方法可以通过 Emmet 或任何其他魔法实现以下生产力提升？

1. 从文本编辑器或电子邮件粘贴一些多行文本:

   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>
   

2. 有一些<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 中，您可以通过以下方式执行此操作:

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

为了提高工作效率，您需要快速访问此工具。你可以通过这样的方式得到它: 转到文件 -> 设置 -> 键盘映射，找到带有 Emmet 的环绕声(有一个搜索行)并为此操作添加首选键盘快捷键。

干杯!