可通过五种方式在VS Code中创建代码片段：一、命令面板新建全局片段；二、为特定语言配置专属片段；三、从选中代码导出片段；四、打包为VSIX扩展分享；五、用GitHub Gist同步共享。
如果您希望在 Visual Studio Code 中快速插入常用代码结构，可以通过创建自定义代码片段来实现。以下是完成此任务的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、通过命令面板创建用户代码片段
VSCode 提供了内置的代码片段管理功能，用户代码片段保存在本地配置中，对所有工作区生效。该方式适合定义通用性强、复用频率高的模板。
1、按下 Cmd + Shift + P（macOS）或 Ctrl + Shift + P（Windows/Linux）打开命令面板。
2、输入并选择 Preferences: Configure User Snippets。
3、在弹出的菜单中选择 New Global Snippets file...，输入文件名如 my-react-snippets 并回车。
4、VSCode 将自动打开一个以 .code-snippets 为后缀的 JSON 文件，此时可按格式编写片段。
二、为特定语言创建语言专属代码片段
语言专属片段仅在对应语言的编辑器中触发，例如只在 .ts 文件中激活 TypeScript 片段。该方式能避免命名冲突，提升上下文准确性。
1、再次调用命令面板，执行 Preferences: Configure User Snippets。
2、从列表中选择目标语言，例如 typescript 或 javascript。
3、在打开的 JSON 文件中，以键值对形式添加片段，键名为触发前缀（如 log），值对象中包含 prefix、body、description 字段。
4、在 body 数组中，每行写一条代码；使用 $1、$2 表示光标停靠位置，$0 表示最终光标位置。
三、从当前文件导出为代码片段
当已有某段高频使用的代码块时，可直接将其选中并转换为可复用的片段，无需手动重写 JSON 结构。该方式适合快速沉淀临时代码模式。
1、在编辑器中选中目标代码块，例如一段 React 函数组件骨架。
2、右键点击选中区域，在上下文菜单中选择 Create Snippet from Selection。
3、在弹出的输入框中填写片段名称（如 react-fc）和描述（如 React functional component）。
4、VSCode 自动跳转至用户全局片段文件，并插入已预填充好 prefix 和 body 的条目，可立即修改保存。
四、将代码片段打包为 VSIX 扩展分享给他人
若需将一组代码片段分发给团队或公开发布，可将其封装为 VS Code 扩展。VSIX 是 VS Code 官方支持的扩展分发格式，包含清单文件与片段资源。
1、新建空文件夹，进入终端执行 npm init -y 初始化 package.json。
2、在根目录下创建 snippets/ 子目录，并将所有 .code-snippets 文件放入其中。
3、在 package.json 中添加字段："contributes": { "snippets": [{ "language": "javascript", "path": "./snippets/javascript.json" }] }。
4、安装 vsce 工具：npm install -g vsce，然后运行 vsce package 生成 .vsix 文件。
五、通过 GitHub Gist 同步和共享代码片段
GitHub Gist 提供轻量级代码托管能力，支持版本控制与直接导入。适用于个人多设备同步或小范围协作，无需构建完整扩展包。
1、访问 https://gist.github.com，点击 New gist。
2、填写文件名（如 vscode-react-snippets.code-snippets），粘贴 JSON 内容，选择 Create secret gist 或公开发布。
3、复制 Gist 页面 URL，在另一台机器的 VSCode 中执行命令 Developer: Install Extension from Location...，粘贴 URL 并确认安装。
