给VSCode添加使用标签包裹快捷键

在日常前端开发中，我们经常需要用一个新标签包裹已有的HTML代码块。比如在重构页面结构时，需要将一组元素放入新的容器标签中。然而，VSCode在这方面并不像WebStorm等JetBrains IDE那样提供开箱即用的标签包裹快捷键。

问题场景

想象一下这个常见场景：你有一大片已经写好的HTML代码，现在需要用一个新的<div class="wrapper">标签将它们全部包裹起来。在VSCode中，你可能会这样操作：

1. 在代码前面输入<div class="wrapper">
2. VSCode会自动补全</div>，但这个闭合标签出现在错误的位置
3. 手动删除这个自动补全的</div>
4. 滚动到代码块末尾
5. 手动添加</div>

这个过程不仅繁琐，还容易出错，特别是在处理大量代码时。

解决方案：Emmet的Wrap with Abbreviation

VSCode内置了强大的Emmet功能，其中"Wrap with Abbreviation"就是专门解决这个问题的神器。虽然默认没有快捷键，但我们可以通过简单的设置来启用它。

设置步骤

方法一：通过命令面板设置

1. 选中需要包裹的HTML代码块
2. 按Ctrl+Shift+P（Mac: Cmd+Shift+P）打开命令面板
3. 输入"wrap"，找到并选择Emmet: Wrap with Abbreviation
4. 在弹出的输入框中输入你想要的标签，比如div.wrapper或section.container
5. 按回车确认，代码立即被完美包裹

方法二：设置快捷键（推荐）

为了更高效的开发体验，建议为这个功能设置一个专用快捷键：

1. 按Ctrl+Shift+P打开命令面板
2. 输入"wrap"，找到Emmet: Wrap with Abbreviation
3. 点击命令右侧的齿轮图标，选择键盘快捷方式
4. 在打开的keybindings.json中添加：

{
  "key": "Ctrl+Shift+W",
  "command": "editor.emmet.action.wrapWithAbbreviation",
}

快捷键Ctrl+Shift+W（Mac: Cmd+Shift+W），它与WebStorm的默认快捷键一致，你也可以改成喜欢的