首先打开命令面板输入Preferences: Configure User Snippets,选择语言或创建全局片段后编辑jsON文件,定义名称、prefix触发词、body内容及描述,支持$1、$2光标定位与时间变量等,保存后在对应文件中输入prefix即可触发插入,提升编码效率。

visual studio Code(vscode)的用户代码片段功能可以帮助你快速插入常用代码块,提升编码效率。通过自定义代码片段,你可以为特定语言或项目设置快捷输入方式。下面介绍如何配置和使用用户代码片段。
打开用户代码片段配置
在 VSCode 中配置代码片段,第一步是打开对应的代码片段文件:
- 按下 Ctrl + Shift + P(mac 上是 Cmd + Shift + P)打开命令面板
- 输入并选择 Preferences: Configure User Snippets
- 选择你要配置的语言(如 javaScript、python 等),或选择“新建全局代码片段”创建通用片段
选择后会打开一个 json 格式的配置文件,你可以在这里添加自己的代码片段。
编写代码片段格式
每个代码片段是一个键值对,键是片段名称,值包含触发词、内容和描述等信息。
示例:为 javascript 创建 log 输出片段
{ "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } }
- prefix:输入这个关键词时触发代码片段(比如输入 log 后按 Tab)
- body:实际插入的代码内容,支持多行
- $1、$2:表示光标停留位置,$1 是第一个跳转点,Tab 切换到 $2
- description:在提示中显示的说明文字
使用变量和占位符
代码片段支持动态变量,让插入的内容更智能:
- $TM_FILENAME:当前文件名
- $TM_DIRECTORY:文件所在目录
- $CURRENT_YEAR、$CURRENT_MONTH、$CURRENT_DATE:当前日期相关
示例:插入带时间戳的注释
<code>{ "Timestamp comment": { "prefix": "tsc", "body": [ "// Created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE", "$1" ], "description": "Insert timestamp comment" } }
保存并使用代码片段
保存配置文件后,无需重启 VSCode。在对应语言的编辑器中输入你设置的 prefix,就会出现自动提示,按 Tab 或 Enter 即可插入代码。
- 确保文件类型正确(如 .js 文件才能触发 JavaScript 片段)
- 可以创建全局片段(所有语言可用)或针对特定语言专用
- 修改后即时生效,可反复调整直到满意
基本上就这些。合理利用代码片段能大幅减少重复劳动,特别适合写组件模板、测试用例或日志输出这类高频操作。不复杂但容易忽略。