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,即可插入带时间戳的日志语句, 和 可分别编辑日志标签和变量。
Metafox 是一个企业内容管理系统,使用一个特别的模板系统,你可通过一些特定的设计和代码来轻松创建 Web 网站,内容存储在 SQL 关系数据库,通过 Web 进行管理,简单、快速而且高效。 Metafox 0.9.1 发布,该版本改用一种更棒的 URL 风格,实现了 RSS 源(可包含远端网站内容到 Metafox 段中),重定向老的访问密钥到新的密钥,增加 RotateAntispam 技
让 snippet 更实用的几个技巧
-
多行 body 写法:用数组形式,每项一行;字符串形式需手动加
\n,易出错 -
变量自动填充:用
$TM_FILENAME_BASE获取当前文件名(不含后缀),适合生成同名组件或测试文件 - 条件判断不支持:snippets 是静态模板,无法做逻辑判断(如“如果是 Vue 文件就加 setup”),复杂逻辑建议用插件或脚本生成
-
作用域控制:可在 snippet 对象中加
"scope": "javascript,typescript",限制生效范围
快速调试和管理 snippets
写完 snippet 后若不生效,先检查:
– 文件是否保存(JSON 格式错误会导致整个文件失效)
– 当前文件语言模式是否匹配(右下角显示如 JavaScript,不是 Plain Text)
– prefix 是否拼写正确,且未被其他扩展覆盖
想查看已启用的所有 snippets?安装插件 Snippets Viewer,它能列出当前语言所有可用片段及触发词。
基本上就这些。写好一个常用 snippet,每天省下几次复制粘贴,长期下来就是可观的时间收益。









