VSCode有无将文本包裹为React/React Native Fragment的快捷键？

VSCode 默认没有预置该操作的快捷键，可以通过以下两种方式实现，覆盖日常 React/React Native 开发的使用需求：

无插件方案：自定义代码片段+快捷键绑定 #

不需要安装任何第三方扩展，用VSCode原生能力就能实现：

• 打开命令面板，快捷键为 Ctrl+Shift+P（Windows/Linux）/ Cmd+Shift+P（Mac），搜索「配置用户代码片段」，依次选中javascriptreact.json、typescriptreact.json两个配置项（对应JSX、TSX两类React开发常用文件），添加如下片段配置：

{
  "Wrap with React Shorthand Fragment": {
    "prefix": "wrap-frag",
    "body": [
      "<>",
      "$TM_SELECTED_TEXT",
      "</>"
    ],
    "description": "用短语法Fragment包裹选中代码"
  },
  "Wrap with Full React.Fragment": {
    "prefix": "wrap-frag-long",
    "body": [
      "<React.Fragment>",
      "$TM_SELECTED_TEXT",
      "</React.Fragment>"
    ],
    "description": "用长写法React.Fragment包裹选中代码（支持传key等属性）"
  }
}

• 打开快捷键配置面板，快捷键为 Ctrl+K Ctrl+S（Windows/Linux）/ Cmd+K Cmd+S（Mac），点击右上角图标打开keybindings.json文件，添加自定义快捷键绑定，示例绑定Alt+F为快速包裹快捷键（可自行替换为顺手的按键组合）：

[
  {
    "key": "alt+f",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus && editorHasSelection && (editorLangId == 'javascriptreact' || editorLangId == 'typescriptreact')",
    "args": {
      "name": "Wrap with React Shorthand Fragment"
    }
  }
]

配置完成后，在jsx/tsx文件中选中需要包裹的代码块，按下设置的快捷键即可自动用<></>包裹内容。如果需要使用支持key属性的长写法Fragment，参照上述格式再加一条快捷键绑定即可。

扩展方案：使用标签包裹类通用扩展 #

如果日常开发中经常需要用不同标签、组件包裹选中内容，可以安装标签包裹类的VSCode扩展，安装后触发包裹命令时直接输入Fragment即可完成包裹，也可以给该操作单独绑定快捷键，省去手写代码片段的步骤。

注意：使用<Fragment>/<React.Fragment>长写法时，需要确保当前文件已正确导入Fragment：import { Fragment } from 'react'，短语法<></>不需要额外导入。

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