一、代码片段简介
在 VSCode 中，自定义代码片段（Snippets）能够显著提升开发效率。用户可以通过快捷触发词快速插入常用代码，减少重复输入。
基础代码片段结构说明：
For Loop：片段名称，具有唯一性，不可重复。scope：指定该片段适用的语言或项目类型，例如javascript,typescript。prefix：一个或多个触发关键词，在智能提示中输入这些关键词即可唤出该片段。支持子字符串匹配，如"fc"可以匹配"for-const"。body：代码内容，可以是一行或多行，插入时会自动换行并对齐。支持变量和占位符（如$1,$2,$0），方便快速定位光标位置。description：对该片段的简要描述，用于智能提示中展示。
{
"For Loop": {
"scope": "javascript,typescript",
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
}
}
二、为什么需要一个离线代码片段库？
在日常开发中，研发经常重复使用一些高频代码片段。若只是依赖手动复制粘贴，或者各自维护本地 .code-snippets 文件，存在效率低且易出错的问题。
构建一个统一的离线代码片段库 VSCode 扩展，能带来这些好处：
- 提升效率： 快速插入常用通用代码片段，减少重复CV工作；
- 保障安全： 不依赖网络，避免业务代码泄露风险；
- 统一规范： 团队共用一套代码片段，减少风格差异，提升代码一致性；
- 便于管理： 集中更新和维护，一次发布全员同步；
- 促进协作： 共享共建，持续优化团队开发体验，提升开发效率。
三、开发注意点&建议
- 添加前缀标识： 官方三方代码片段库会对代码片段触发造成干扰，建议添加唯一前缀标识
- 特殊字符需转义： 若代码片段中含
$等字符时，需要加转义字符\\
四、开发流程
4.1 开发准备
参考资料：Node 版本要求相关讨论 Issue #800
4.1.1 安装 Node.js
推荐使用较新版本的 Node.js（如 v23.6.0），以确保兼容性和稳定性。
4.1.2 安装 VSCode 插件开发工具
执行以下命令全局安装 Yeoman 和 VSCode 扩展生成器：
npm install -g yo generator-code
4.1.3 梳理代码片段
根据团队业务需求整理常用代码片段，作为内容基础。
4.1.4 打开在线代码片段生成工具
使用在线工具快速生成 .code-snippets 文件格式内容：
📌 Snippet Generator
4.2 开发VSCode扩展
4.2.1 创建项目
输入命令生成项目，选择New Code Snippets并按图中所示选择内容
yo code
4.2.2 按需在线生成代码片段
在 📌 Snippet Generator中按格式生成代码片段
4.2.3 编写文件
在snippets.code-snippets中添加生成的代码片段
4.2.4 调试效果
选择顶部 “运行” 中的 “启用调试” 即可查看效果
4.2.5 package.json配置
4.2.6 打包
- 方式一： 终端执行
vsce package - 方式二： 在
package.json中定义build命令为vsce package，后续打包执行npm run build即可
4.2.7 安装
安装后直接就可和调试时一样使用
五、进阶开发点
-
更新日志（CHANGELOG.md）
编写CHANGELOG.md文件，记录每一次版本更新内容，便于团队成员追溯变更历史。 -
扩展说明（README.md）
撰写README.md，简要介绍扩展的功能和支持的代码片段提升可读性和协作效率。 -
版本管理（package.json）
每次发布新版本时，记得更新package.json中的version字段，确保IDE能正常检测到更新。 -
光标提示（Placeholder 提示）
在代码片段中使用类似${3:oData}的语法，为占位符添加默认提示内容，帮助用户快速理解。
希望这篇文章能为你的开发工作带来帮助，如果有任何问题或建议，请随时留言讨论！
