PhpStorm - 使用 tab 和 Emmet 包装代码答案

【问题标题】：PhpStorm - Use tab and Emmet to wrap codePhpStorm - 使用 tab 和 Emmet 包装代码
【发布时间】：2016-08-21 03:17:58
【问题描述】：

我喜欢埃米特。 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>

甚至不确定这个术语是什么。搜索“phpstorm wrapping”并没有给我我需要的东西。

我错过了这个地方的设置吗？

【问题讨论】：

标签： phpstorm

【解决方案1】：

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

附言可以将自定义快捷方式分配给Surround with Emmet 操作，以便可以直接调用它（一个快捷方式将替换步骤#2 和#3）。这可以在Settings/Preferences | Keymap 中完成——只需搜索上述操作（使用搜索字段）。

【讨论】：

在 Mac 上，快捷键是 CMD+ALT+T 然后你有上下文菜单，你可以选择 emmet
如果您不知道快捷键，您也可以使用 SHIFT+CMD+A 并开始输入 surround - 您也会得到环绕 emmet 选项
@RafalKozlowski 这些操作的快捷方式已经在菜单中清楚地显示/可见（在操作名称旁边）。在这种情况下，没有必要使用Help | Find Action... 来查找它们。但是是的——如果用户不知道快捷方式（以及操作在菜单中的确切位置）或不记得确切的操作名称，这是一个很好的查找方法；调用主菜单中不可用的操作或（尚未）可访问主菜单时（例如，从欢迎屏幕）调用操作也很有用。
谢谢，我想这是我能得到的最接近的东西。如果 Emmets 选项卡完成与包装代码一起使用会很好。

【解决方案2】：

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

【讨论】：