VS Code中如何用快捷方式将JSX包裹在父div标签中

一、VS Code原生功能（无需额外扩展） #

• 选中代码块后快速包裹
  选中所有需要包裹的<p>标签内容，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Wrap with Abbreviation并回车，接着输入目标父标签（比如div.className="some class"），回车后就能自动完成包裹，代码缩进和格式会自动处理。
  更快捷的方式：部分环境下选中代码后直接按Alt+W，可直接触发该包裹功能。
• Emmet语法配合包裹
  选中代码块后，直接输入Emmet缩写（比如div.some-class），按下Tab键，就能快速生成带类名的包裹标签，自动添加闭合标签并格式化代码。

二、实用扩展推荐 #

• ES7+ React/Redux/React-Native snippets
  这款扩展除了提供大量React代码片段，也支持快速包裹操作。选中代码后，输入对应触发词即可用指定父标签包裹内容，操作流畅高效。
• Auto Rename Tag
  虽主打重命名标签时同步修改闭合标签，但配合原生包裹功能使用，能避免后续调整标签名时的重复操作，提升整体效率。

三、自定义代码片段（个性化需求） #

如果需要专属的包裹模板，可在VS Code中创建自定义片段：

1. 打开File > Preferences > User Snippets，选择javascriptreact.json。
2. 添加如下示例片段：

"Wrap with div with class": {
  "prefix": "wrapdiv",
  "body": [
    "<div className=\"$1\">",
    "\t$TM_SELECTED_TEXT",
    "</div>"
  ],
  "description": "Wrap selected JSX with a div with className"
}

选中代码后，输入wrapdiv并按Tab，就能快速用带类名的div包裹内容，还可直接编辑类名参数。

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