VSCode代码片段是内置功能,非插件实现;需按语言建对应JSON文件(如typescript.json),或选全局创建common.code-snippets;结构含prefix、body、description,支持变量与光标跳转。

VSCode 的代码片段(Snippets)不是靠插件实现的,而是内置功能,只要路径和格式对,改完就能立刻生效。
如何创建自定义代码片段文件
VSCode 的代码片段以 JSON 格式组织,存放在特定目录下。不同语言对应不同文件,比如写 TypeScript 就建 typescript.json,写 Python 就建 python.json。
- 打开命令面板(
Ctrl+Shift+P或Cmd+Shift+P),输入并选择Preferences: Configure User Snippets - 选中目标语言(如
javascript),会自动打开或创建javascript.json - 若要全局生效(所有语言都可用),选
New Global Snippets file...,文件名建议用common.code-snippets
注意:文件名必须是 .json 后缀,且不能是 .code-snippets —— 除非你选的是「全局」选项,否则 VSCode 不认。
代码片段的 JSON 结构怎么写
每个片段是一个键值对,key 是触发词(tab trigger),value 是包含 prefix、body、description 的对象。最简结构如下:
{
"log console": {
"prefix": "log",
"body": ["console.log('$1');", "$2"],
"description": "console.log with placeholder"
}
}-
prefix是你在编辑器里输入后按Tab触发的关键词,比如输log再按Tab -
body是插入的内容,数组每项是一行;$1、$2是光标跳转位置,$0是最终停留点 - 支持变量如
$TM_FILENAME_BASE(当前文件名不含后缀)、$CURRENT_YEAR,完整列表见 VSCode 官方文档Variables in snippets
别漏掉逗号,JSON 对语法敏感;如果片段没生效,先检查控制台(Help > Toggle Developer Tools)有没有报错 invalid json。
为什么写了片段却没反应
常见原因不是配置错,而是触发逻辑被忽略:
- 当前文件语言模式不匹配:右下角状态栏显示的是
Plain Text,但你的片段在javascript.json里 → 点击它,改成JavaScript - 片段放在了错误位置:用户级片段在
User/snippets/下,工作区级片段需放在项目根目录.vscode/snippets/中,且文件名必须为*.code-snippets(注意后缀) - 前缀冲突:已有内置片段(如
for)或其它扩展注册了同名prefix,VSCode 默认优先使用语言自带片段 - 没重启编辑器或重载窗口:修改全局片段后,执行
Developer: Reload Window最稳妥
进阶技巧:动态生成与多光标编辑
复杂片段可以组合变量和转义逻辑,比如生成带时间戳的注释:
{
"ts comment": {
"prefix": "tsc",
"body": [
"/**",
" * @author $1",
" * @created $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE",
" */",
"$0"
]
}
}-
$1输入作者名后按Tab跳到下一处,$0是最后光标位 - 多行
body自动保留缩进,但首行缩进会被当作整体偏移 → 建议用空字符串占位对齐 - 不想让某处被跳转?用
${1:default}设默认值,或${1|a,b,c|}提供选项(需 VSCode 1.85+)
真正麻烦的不是写法,而是维护——片段一多就难定位。建议按功能分文件(react.code-snippets、api.code-snippets),而不是全塞进一个大 JSON 里。









