VSCode代码片段可大幅提升编码效率，推荐按语言创建专属snippets；通过Preferences: Configure User Snippets配置，以prefix触发、body定义内容，支持光标跳转和默认值；多行用数组格式，可利用变量如$TM_FILENAME_BASE，但不支持条件逻辑。
VSCode 的代码片段（Snippets）是提升编码效率的利器，尤其适合重复性高、结构固定的代码块，比如组件模板、API 请求封装、日志格式等。关键不在于写得多，而在于写得准、调用得快。
如何创建自定义代码片段
VSCode 支持全局（所有语言）和语言专属两种 snippets。推荐按语言创建，避免污染其他文件类型。
- 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入并选择 Preferences: Configure User Snippets
- 选中目标语言（如 javascript、vue 或 typescript），会打开对应 JSON 文件（如
javascript.json） - 在该文件中添加一个键值对，键为触发名（如
log），值为 snippet 对象，包含prefix、body、description等字段
编写 snippet 的核心字段说明
prefix 是你在编辑器中输入后触发补全的关键字；body 是插入的实际内容，支持换行与制表符；$1、$2 表示光标停靠位置，按 Tab 可跳转；${1:default} 表示带默认值的占位符。
例如，在 javascript.json 中添加：
{
"console.log with timestamp": {
"prefix": "clog",
"body": ["console.log(`[${new Date().toISOString()}] $1`, $2);"],
"description": "Log with ISO timestamp"
}
}
保存后，在 JS 文件中输入 clog + Tab，即可插入带时间戳的日志语句，$1 和 $2 可分别编辑日志标签和变量。
让 snippet 更实用的几个技巧
-
多行 body 写法：用数组形式，每项一行；字符串形式需手动加
\n，易出错 -
变量自动填充：用
$TM_FILENAME_BASE获取当前文件名（不含后缀），适合生成同名组件或测试文件 - 条件判断不支持：snippets 是静态模板，无法做逻辑判断（如“如果是 Vue 文件就加 setup”），复杂逻辑建议用插件或脚本生成
-
作用域控制：可在 snippet 对象中加
"scope": "javascript,typescript"，限制生效范围
快速调试和管理 snippets
写完 snippet 后若不生效，先检查：
– 文件是否保存（JSON 格式错误会导致整个文件失效）
– 当前文件语言模式是否匹配（右下角显示如 JavaScript，不是 Plain Text）
– prefix 是否拼写正确，且未被其他扩展覆盖
想查看已启用的所有 snippets？安装插件 Snippets Viewer，它能列出当前语言所有可用片段及触发词。
基本上就这些。写好一个常用 snippet，每天省下几次复制粘贴，长期下来就是可观的时间收益。
