Question

我爱emmet。 div.container然后按Tab键让我的生活变得更加轻松。

但假设你有这样的div： <div class="myDiv"> </div>并且您希望将其包装在容器中。

我到目前为止所做的是输入

<div class="container">

</div>

然后我复制粘贴myDiv。

必须有一种更简单的方法，不是吗？

我正在寻找的是能够将光标放在<div class="myDiv">前面，输入div.container然后按Tab键，结果会像这样结束：

<div class="container">
    <div class="myDiv">
    </div>
</div>

甚至不确定这个术语的含义。正在搜索＆＃34; phpstorm包装＆＃34;并没有给我我需要的东西。

我错过了哪个地方？

Answer 1

选择您的文字/代码
Code | Surround With...（或Code | Surround with Live Template... - HTML上下文的菜单几乎相同）
在出现的弹出窗口中选择Emmet选项
输入您的emmet序列

<强> P.S。可以为Surround with Emmet动作分配自定义快捷方式，以便可以直接调用它（一种可替代步骤＃2和＃3的快捷方式）。这可以在Settings/Preferences | Keymap中完成 - 只需搜索上述操作（使用搜索字段）。

Answer 2

您不需要div.container。一个简单的.container也可以完成这项任务。如果未指定元素，则会自动生成div 您可以使用>执行嵌套元素。在您的情况下，它将是：.container>.myDiv。如果您想要包围现有项目，请查看@LazyOne答案。它的快捷方式是[Ctrl] + [Alt] + j（至少在默认设置下）有关详细信息，请查看here。（只是快速谷歌搜索“emmet PHPstorm”但它看起来不错）

PhpStorm - 使用选项卡和Emmet包装代码

2 个答案: