Visual Studio Code 快捷方式将 HTML 元素包装到容器标签中

Question

当您有一个 HTML 标签并且想要将其包装到另一个 HTML 标签中时，最快/最简单的方法是什么？由于这种情况经常发生，我正在寻找一种优化它的方法。

目前主要包括以下步骤：

1. 在原始标签之前创建新的 HTML 标签
2. 将（自动生成的）结束标签移至原始标签的末尾
3. 选择原始标签（可能需要滚动页面）
4. 调整插入标签的缩进
5. （终于完成了...

我正在寻找这样的东西：

1. 选择（折叠的）HTML 标签
2. 按一些快捷键（例如CTRL+ Bfor <b>，CTRL+ Dfor <div>）将其包装到特定标签中

Answer 1

我不知道是否有一个扩展可以完成你的确切 2 个步骤，但这里有一个在 3 中完成它的方法：

1. 选择一个 HTML 标签，无论是否折叠 - 都没关系。
2. 按下热键执行editor.emmet.action.wrapWithAbbreviation命令。默认情况下未设置，因此您需要对其进行配置。
3. 输入将包装您所选内容的标签。

也许，可以借助代码片段分两步完成此操作。您可以为不同的标签创建一堆代码片段，例如：

"Wrap with div": {
    "scope": "html",
    "prefix": "wrap",
    "body": "<div>$TM_SELECTED_TEXT</div>"
}

然后创建一组热键宏，首先选择整个标签（例如editor.emmet.action.balanceOut），然后调用每个代码片段，editor.action.insertSnippet如下所示args：{ "name": "Wrap with div" }。参见例如这个答案有关定义宏的示例。

Answer 2

因此，有一种方法只需 2 个步骤就可以轻松包装 HTML 元素（安装 vs Code 扩展后）：

因此，首先进入 VS 代码并安装名为“htmltagwrap”的扩展。

然后你就可以施展魔法了：

1）选择要包装的代码块，然后 -

如果你正在使用视窗按：Alt+W。

如果你正在使用苹果按：option+W。

然后是 VS Code（如果我没记错的话Emmetthat-) 将自动用标签包裹选定的 HTML 元素<p></p>，但不用担心 :p

2）然后直接输入您想要的元素，它就会替换它。