VSCode的用户片段（User Snippets）怎么用？

VSCode用户片段可提升编码效率，通过输入前缀自动补全代码块。打开首选项中的用户代码片段，选择语言或创建全局文件，编写包含prefix、body、description的JSON片段，支持光标定位与变量插入，保存后在对应文件中输入前缀即可触发，如“log”生成console.log，“html5”生成HTML模板，无需重启生效。

VSCode 的用户片段（User Snippets）能帮你快速插入常用代码块，提升编码效率。你只需输入简短前缀，就能自动补全一整段代码。设置起来不难，关键是按步骤操作清楚。

打开用户片段配置

在 VSCode 中，点击菜单栏的 文件 > 首选项 > 用户代码片段（Windows/Linux），或 Code > 首选项 > 用户代码片段（macOS）。也可以用快捷键 Ctrl + Shift + P 打开命令面板，输入“snippets”搜索“首选项：配置用户代码片段”。

接着会弹出选择框，你可以：

• 为特定语言创建片段：比如选“javascript”，生成的片段只在 JS 文件中生效。
• 创建全局片段：选“新建全局代码片段文件”，命名后可在任意文件使用。

编写代码片段

选好语言或创建新文件后，会打开一个 JSON 格式的配置文件。每个片段包含几个关键字段：

说明一下这几个字段：

• Print to console：片段名称，随便起，不会影响触发。
• prefix：触发关键词，比如输入 log 就会出现这个片段。
• body：实际插入的代码，支持换行（数组每项是一行）。
• description：提示信息，出现在自动补全列表里。

其中 、 是光标定位点。 是第一个停靠位置，按 Tab 跳到 ，依此类推。

其中 $1、$2 是光标定位点。$1 是第一个停靠位置，按 Tab 跳到 $2，依此类推。$0 是最后停留的位置。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

常用技巧和变量

片段支持一些内置变量，让内容更灵活：

• $TM_FILENAME：当前文件名
• $TM_DIRECTORY：文件所在路径
• $CURRENT_YEAR、$CURRENT_MONTH：当前年月
• ${1:default}：占位符带默认值，比如 ${1:name} 会显示 name 可编辑

例如写一个 HTML 模板片段：

输入 html5 回车，就会自动生成结构，光标先在 title 位置，按 Tab 跳到底部 body 内。

保存并使用

写完片段保存文件即可生效。不用重启 VSCode。打开对应语言的文件，输入你设的 prefix，比如 log 或 html5，就会在智能提示中看到片段，回车插入。

如果没出现，检查：

• JSON 格式是否正确（不能有尾逗号）
• 语言类型是否匹配
• 前缀是否拼错

基本上就这些。定义几个高频片段，像函数模板、组件结构、注释块，能省下不少重复敲键盘的时间。不复杂但容易忽略。

以上就是VSCode的用户片段（User Snippets）怎么用？的详细内容，更多请关注php中文网其它相关文章！