如何在VSCode中创建自定义片段实现React自闭合标签自动补全

第一步：配置自定义代码片段 #

按 Ctrl+Shift+P（Mac 系统为 Cmd+Shift+P）唤起命令面板，输入「配置用户代码片段」，根据你的技术栈选择 javascriptreact.json（JSX 项目）或 typescriptreact.json（TSX 项目），在打开的JSON文件中插入以下配置：

{
  "React自闭合组件标签": {
    "prefix": "^([A-Z][a-zA-Z0-9]*)$",
    "body": "<${1:$TM_CURRENT_WORD} />$0",
    "description": "首字母大写的组件名自动补全为自闭合标签",
    "matchOnWordStart": true,
    "triggerWhenWordComplete": true
  }
}

配置逻辑说明：

• prefix 用正则匹配所有符合 PascalCase 命名规则（首字母大写、后续为字母/数字）的字符串，刚好覆盖React组件的通用命名规范
• body 中的 $TM_CURRENT_WORD 是VSCode内置变量，会自动读取你当前输入的组件名，无需手动指定固定前缀
• 如果需要补全后快速添加属性，可以把body调整为 <${1:$TM_CURRENT_WORD}$2 />$0，补全后按Tab即可跳转至属性编写位置

第二步：解决Emmet默认补全冲突 #

默认Emmet会优先补全完整闭合标签，你可以通过以下任意一种方式解决冲突：

• 方式1：调高代码片段提示优先级，打开VSCode settings.json 加入配置 "editor.snippetSuggestions": "top"，自定义片段会排在补全列表最上方
• 方式2：修改Emmet全局配置，搜索设置项 Emmet: Expand Empty Tags 并勾选，空标签会默认生成自闭合格式

效果验证 #

输入任意首字母大写的组件名，比如Recipe，补全列表会出现自定义的自闭合标签选项，选中后直接生成<Recipe />，无需手动修改标签格式。

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