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

Question 1

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

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

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

"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 个步骤，但这里有一个在 3 中完成它的方法：

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

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

"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" }。参见例如这个答案有关定义宏的示例。

Question 2

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

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

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

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

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

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

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

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

Answer