在 vscode 中配置自定义代码片段需创建jsON 格式的。code-snippets 文件，通过命令面板选择全局或语言专属方式生成，编写含 prefix、body、description 的规范片段，保存后即时生效，支持占位符跳转与跨平台同步。
在 VSCode 中配置自定义代码片段，核心是创建 json 格式的 `.code-snippets` 文件，并放在正确路径下，VSCode 会自动识别并加载。
找到或创建用户代码片段文件
打开 VSCode，按 Ctrl+Shift+P（windows/linux）或 Cmd+Shift+P（macos），输入 Preferences: Configure User Snippets 并回车。然后选择 New Global Snippets file…（全局生效）或选某个语言（如 javascript.json，仅对该语言生效）。输入文件名（如 my-react.code-snippets），回车后 VSCode 会自动创建并打开该 JSON 文件。
编写符合规范的代码片段
VSCode 的代码片段是标准 JSON 格式，每个片段以唯一键名开头，包含 prefix（触发关键词）、body（插入内容）、description（提示文字）。body 支持制表符占位（$1、$2）、变量（$TM_FILENAME_BASE）和转义（用双反斜杠 表示单个反斜杠）。
例如，一个 react 函数组件片段：
{"React Functional Component": { "prefix": "rfc", "body": [ "const $1 = () => {", " return (", " <div>", " $0", " </div>", ");", "};", "", "export default $1;" ], "description": "Create a React functional component" } }
保存后立即生效，无需重启
<p> 保存 `.code-snippets` 文件后，切换到对应语言的编辑器（如 .js 或 .tsx 文件），输入设定的 <strong>prefix</strong>（如 <code>rfc），VSCode 会自动提示该片段。按 Tab 或回车即可插入，支持跳转占位符（ → → …… → <p> 保存 `.code-snippets` 文件后，切换到对应语言的编辑器（如 .js 或 .tsx 文件），输入设定的 <strong>prefix</strong>（如 <code>rfc），VSCode 会自动提示该片段。按 Tab 或回车即可插入，支持跳转占位符（$1 → $2 → …… → $0 最终位置）。
最终位置）。
- 多个片段可共存于同一文件，互不干扰
- 全局片段对所有语言有效；语言专属片段只在对应语言文件中触发
- 若片段未出现，检查文件扩展名是否为
.code-snippets，且 JSON 格式无语法错误
进阶：复用与同步片段
`.code-snippets` 文件本质是普通 JSON 文件，可直接复制到其他机器的相同路径下（如 Windows：%appDATA%CodeUsersnippets；macOS：~/Library/Application Support/Code/User/snippets/；Linux：~/.config/Code/User/snippets/），也可纳入 git 仓库统一管理。
想让团队共用？把片段文件放共享目录或私有 Git 仓库，成员手动复制或用脚本部署即可。
基本上就这些 —— 不复杂但容易忽略细节，关键是路径对、格式对、语言上下文对。
