在 VS Code 中创建和共享自己的代码片段，核心是编辑 JSON 格式的 snippets 文件，并通过扩展或 GitHub 等方式分发。关键在于理解作用域（scope）、变量语法和触发逻辑，而不是单纯复制粘贴。
如何创建你自己的代码片段
VS Code 的代码片段按语言作用域组织，保存在特定 JSON 文件中。你可以为单个项目、当前用户或某个扩展单独配置。
- 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Preferences: Configure User Snippets
- 选择一种语言（如 javascript）或新建全局文件（如 New Global Snippets file）
- 填入符合格式的 JSON 片段，例如：
{
"console log with timestamp": {
"prefix": "clt",
"body": ["console.log(`[${new Date().toISOString()}] $1`);"],
"description": "Log with ISO timestamp"
}
}
其中 prefix 是触发关键词，body 是插入内容，$1 是光标初始位置，支持多个占位符（$2、$0 等）和变量（如 $TM_FILENAME_BASE）。
让片段只在特定文件类型中生效
片段是否出现，取决于当前编辑器的语言模式（Language Mode）。VS Code 会自动匹配 snippet 的 scope（即语言 ID）。
- JavaScript 片段默认只在 javascript、typescript 文件中触发
- 若想在 Vue 单文件组件的
区域也生效，可把 scope 设为 javascript, vue（需在扩展中定义，或使用"scope": "javascript,typescript,vue"） - 查看当前语言 ID：状态栏右下角点击语言名称 → “Configure Language Specific Settings” → 查看 language 字段值
打包并分享你的代码片段
直接发 JSON 文件给别人不够友好，推荐打包成 VS Code 扩展，便于安装与更新。
- 用 yo code 脚手架快速生成扩展模板（需先安装 Yeoman 和 VS Code Generator）
- 把 snippets 放进扩展目录下的 snippets/ 文件夹，如
snippets/javascript.json - 在 package.json 中声明：
"contributes": { "snippets": [{ "language": "javascript", "path": "./snippets/javascript.json" }] } - 运行 vsce package 打包为 .vsix 文件，或发布到 Visual Studio Marketplace
别人只需双击 .vsix 安装，或在扩展市场搜索名称即可启用，无需手动配置路径。
调试和验证片段是否生效
写完片段常遇到“输完 prefix 没反应”，多数是 scope 不匹配或 JSON 格式错误。
- 检查 JSON 是否有语法错误（VS Code 会高亮提示）
- 确认当前文件的语言模式是否与 snippet 的 language 匹配（比如 .ts 文件要对应 typescript，不是 javascript）
- 在命令面板中执行 Developer: Toggle Developer Tools，查看 Console 是否报错
- 临时把 snippet 放到全局文件（global snippets）测试，排除作用域干扰
基本上就这些。不复杂但容易忽略细节，尤其是语言 ID 和 JSON 结构。写好一个常用片段，每天省几秒，积少成多就是效率提升。
