VSCode中如何实现类似WebStorm Ctrl+Shift+Del的移除包裹标签功能？

方法1：配置自定义Emmet快捷键 #

VSCode的Emmet其实支持unwrap操作，只是默认未绑定快捷键，你可以手动配置实现需求：

• 打开快捷键设置（快捷键：Ctrl+K Ctrl+S）
• 点击右上角的「打开键盘快捷方式(JSON)」图标
• 添加以下配置：

{
  "key": "ctrl+shift+delete",
  "command": "editor.emmet.action.removeTag",
  "args": { "unwrap": true },
  "when": "editorLangId == html || editorLangId == jsx || editorLangId == tsx"
}

配置完成后，按下Ctrl+Shift+Del就会移除光标所在元素的直接父标签，和WebStorm的默认行为一致。

方法2：借助扩展实现层级选择 #

如果需要像WebStorm那样弹出选择器、自由选择要删除的外层标签层级，可以安装HTML Tag Wrapper或Tag Assistant Lite这类扩展：

• 安装扩展后，在快捷键JSON中绑定对应命令：

{
  "key": "ctrl+shift+delete",
  "command": "htmltagwrapper.unwrap",
  "when": "editorLangId == html || editorLangId == jsx || editorLangId == tsx"
}

这类扩展大多支持多级标签选择，能让你指定删除任意一层外层包裹标签。

方法3：临时快速操作（无需配置） #

如果只是临时需要移除外层标签，也可以用VSCode原生命令快速实现：

1. 光标放在目标标签内，按下Ctrl+Shift+P打开命令面板
2. 输入Emmet: Remove Tag，在弹出的输入框中输入..（代表父标签），回车即可删除直接外层标签

内容的提问来源于stack exchange，提问作者tomcat