如何创建和分享你自己的VSCode代码片段

可通过五种方式在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 函数组件骨架。

Avactis购物车

Avactis是一个强大的PHP在线购物系统拥有多个版本包括开源版本。它具备一个在线购物系统所需要的所有功能从产品到会员管理，订单和营销。可以无限分类和为产品指定任务数量的图片（支持自动生成缩略图）。使用自定义字段功能，让你可以更好地定义一个产品。该系统提供以非常灵活的方式来创建任意类型的促销活动如设置折扣代码，基于价格的折扣或基于数量的折扣等。

0

查看详情

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 并确认安装。

以上就是如何创建和分享你自己的VSCode代码片段的详细内容，更多请关注php中文网其它相关文章！