讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

Laper
Laper

剧本策划到成片协作

Seko
Seko

AI短剧一键生成成片

updream

一键生成高质量推广成片

VSCode代码片段(Snippets):创建你自己的代码模板库

大磊君_3785

大磊君_3785

发布时间:2025-12-21 12:15:19

|

802人浏览过

|

来源于php中文网

原创

VSCode中需配置自定义代码片段以快速插入常用结构。步骤包括:一、通过Cmd+Shift+P运行Configure User Snippets选择语言或新建全局文件;二、在JSON中定义prefix、body(支持占位符$1/$0)和description;三、使用TM_FILENAME_BASE、CURRENT_YEAR等变量增强灵活性;四、创建全局片段复用跨语言模板;五、保存后输入prefix验证,遇问题通过开发者工具查JSON错误。

vscode代码片段(snippets):创建你自己的代码模板库

如果您希望在VSCode中快速插入常用代码结构,但每次都需要手动输入重复内容,则可能是由于尚未配置自定义代码片段。以下是创建专属代码模板库的具体步骤:

本文运行环境:MacBook Air,macOS Sequoia。

一、打开用户代码片段文件

VSCode通过JSON格式的snippets文件管理代码片段,用户级片段存储在全局配置中,可作用于所有支持该语言的文件。需先定位并编辑对应语言的片段文件。

1、启动VSCode,按下 Cmd + Shift + P 打开命令面板。

2、输入 Configure User Snippets 并回车。

3、在弹出列表中选择目标语言,例如 javascript;若需通用片段,选择 New Global Snippets file。

二、编写基础JSON片段结构

每个代码片段由唯一键名标识,包含前缀(trigger)、内容(body)和描述(description),body支持多行及光标占位符。结构必须符合严格JSON语法,否则无法加载。

1、在打开的JSON文件中,删除默认注释内容,保留空大括号 {}。

2、添加新键名,如 "log console",其值为一个对象。

3、在该对象内写入 "prefix" 字段,设为 "log";写入 "body" 字段,设为数组 ["console.log('$1');", "$2"];写入 "description" 字段,设为 "Insert console.log with cursor at placeholder"。

三、使用变量与占位符增强灵活性

代码片段支持内置变量(如TM_FILENAME、CURRENT_YEAR)和制表位(、、

代码片段支持内置变量(如TM_FILENAME、CURRENT_YEAR)和制表位($1、$2、$0),使插入内容能自动适配上下文并支持跳转编辑。$0为最终光标位置,不可省略。

),使插入内容能自动适配上下文并支持跳转编辑。

代码片段支持内置变量(如TM_FILENAME、CURRENT_YEAR)和制表位($1、$2、$0),使插入内容能自动适配上下文并支持跳转编辑。$0为最终光标位置,不可省略。

为最终光标位置,不可省略。

Todo List for MacOS
Todo List for MacOS

仅限macOS - 通过AppleScript管理macOS提醒事项应用。支持全功能提醒管理:添加、列出、完成、删除、搜索、创建列表等。

下载

1、在body数组中使用 "${TM_FILENAME_BASE}" 插入当前文件名(不含扩展名)。

2、将多个占位符按编辑顺序编号,如 $1、$2、$0,确保Tab键可依次跳转。

3、对需重复输入的字段,使用 "${1:default}" 设置默认值,光标停留时可直接修改或跳过。

四、为多语言复用片段创建全局文件

全局代码片段不绑定特定语言,适用于任意文件类型,适合创建通用工具函数、注释头、许可证声明等跨语言模板。

1、执行 Configure User Snippets 后选择 New Global Snippets file。

2、输入文件名,如 my-common,回车后生成 my-common.code-snippets 文件。

3、在此文件中定义片段时,prefix可设为 "header",body设为包含作者、日期、描述的多行注释块,并嵌入 "${CURRENT_YEAR}" 和 "${USER}" 变量。

五、验证与实时调试片段

VSCode不会自动重载已修改的snippets文件,需手动触发语法检查与生效机制,避免因格式错误导致片段不可见或展开异常。

1、保存snippets文件后,在任意目标语言文件中输入设定的prefix,如 log,确认是否出现建议项。

2、若无响应,按下 Cmd + Shift + P,执行 Developer: Toggle Developer Tools,切换到Console标签页查看JSON解析错误。

3、常见错误包括末尾多余逗号、单引号替代双引号、未转义反斜杠,须按提示逐项修正。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2295

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3742

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1236

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4339

2025.09.10

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

936

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

6983

2024.05.29

default gateway怎么配置
default gateway怎么配置

配置default gateway的步骤:1、了解网络环境;2、获取路由器IP地址;3、登录路由器管理界面;4、找到并配置WAN口设置;5、配置默认网关;6、保存设置并退出;7、检查网络连接是否正常。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

377

2023.12.07

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

1575

2023.06.30

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn