VSCode 代码片段功能可提升编码效率，包括创建用户级和语言级片段、从代码快速生成片段、使用变量占位符增强灵活性，以及通过扩展管理预置片段。
如果您在编写代码时反复输入相同或相似的代码结构，则可能是由于缺乏对 VSCode 代码片段功能的有效利用。以下是配置和使用代码片段的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、创建用户级代码片段
用户级代码片段适用于所有支持的语言，由开发者自主定义，存储于 VSCode 用户设置目录中，便于跨项目复用。
1、打开 VSCode，按下 Cmd + Shift + P 调出命令面板。
2、输入并选择 Preferences: Configure User Snippets。
3、在弹出菜单中选择 New Global Snippets file…，输入文件名如 common.code-snippets 并回车。
4、在打开的 JSON 文件中，按规范添加键值对，例如定义一个打印日志的片段：
{“log”: {“prefix”: “log”, “body”: [“console.log(‘$1’);”, “$2”], “description”: “ 输出控制台日志 ”}}
二、为特定语言创建语言级代码片段
语言级代码片段仅在指定语言的编辑器中激活，具有上下文感知能力，能精准匹配语法结构与作用域。
1、按下 Cmd + Shift + P 打开命令面板。
2、输入并选择 Preferences: Configure Language Specific Snippets。
3、在弹出列表中选择目标语言，例如 javascript。
4、在生成的 JSON 中添加片段对象，确保其外层包裹在语言标识符键下，如 “javascript”: {…}。
三、从当前文件快速生成代码片段
通过提取已有代码块并封装为可复用片段，可避免手动编写 JSON 结构，降低语法错误风险。
1、在编辑器中选中一段 JavaScript 函数代码，右键选择 Create Snippet from Selection（需安装扩展 Snippet Creator）。
2、在弹出窗口中填写 prefix、description 和 scope（如 javascript）。
3、点击确认后，片段自动写入对应语言的代码片段文件，并立即生效。
四、使用变量和占位符增强片段灵活性
代码片段支持内置变量（如 $TM_FILENAME_BASE）与制表位占位符（如 $1），使插入内容具备动态性与交互性。
1、在片段 body 数组中使用 $1 表示首个光标停留位置，$2 表示第二个，依此类推。
2、插入 $CLIPBOARD 可粘贴当前系统剪贴板内容，插入 $CURRENT_YEAR 可自动填充当前年份。
3、组合使用如 class $1 {constructor($2) {this.$3 = $2;} }，实现类结构快速生成与字段绑定。
五、管理已安装的代码片段扩展
第三方扩展可提供预置的高质量片段集合，覆盖框架、库及常用 工具 链，减少手动配置负担。
1、打开 VSCode 扩展视图，搜索关键词 snippets。
2、安装高星扩展如 JavaScript (ES6) code snippets 或 Vue VSCode Snippets。
3、安装完成后无需额外启用，相关语言文件中输入对应 prefix（如 v-if）即可触发 Vue 指令片段。
