怎样在VSCode中创建自定义代码片段？-VSCode-PHP中文网

怎样在VSCode中创建自定义代码片段？

紅蓮之龍

发布： 2025-09-28 09:10:01

原创

491人浏览过

在VSCode中创建自定义代码片段可大幅提升编码效率。通过“首选项：配置用户代码片段”命令，选择语言或项目后进入JSON配置文件，按名称、前缀、主体和描述定义片段，如输入"log"触发console.log模板，支持$1、$2等制表位跳转及$TM_FILENAME、$CURRENT_YEAR等动态变量，保存后在对应语言文件中输入前缀即可自动补全，适用于日志、注释头、函数结构等常用代码模板。

怎样在vscode中创建自定义代码片段？

在 VSCode 中创建自定义代码片段，能大幅提升编码效率。直接通过内置的用户代码片段功能，按语言或项目配置模板，输入简短前缀就能自动补全常用代码结构。

打开代码片段配置文件

按下 Ctrl + Shift + P（Mac 上是 Cmd + Shift + P）打开命令面板，输入“首选项：配置用户代码片段”，选择后会列出所有支持的语言。点击你要设置的语言（如 JavaScript、Python 等），VSCode 会打开一个 JSON 格式的配置文件。

如果你希望为某个项目单独设置片段，可以选择“配置项目代码片段”，然后命名文件（如 project.code-snippets）。

编写代码片段格式

每个代码片段由一个名称标识，包含触发前缀、显示内容和主体代码。基本结构如下：

{ "Log to Console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "输出日志到控制台" } }

说明：

易笔AI论文

专业AI论文生成，免费生成论文大纲，在线生成选题/综述/开题报告等论文模板

103

查看详情

Log to Console：片段名称，不会影响使用
prefix：输入这个值时触发建议（如输入 log）
body：实际插入的代码行，支持换行数组
$1、$2：制表位，编辑时按 Tab 可依次跳转
$0：最终光标位置
description：提示信息，出现在自动补全列表中

使用变量和占位符增强灵活性

代码片段支持动态变量，让生成的内容更智能：

$TM_FILENAME：当前文件名
$TM_DIRECTORY：文件所在路径
$CURRENT_YEAR、$CURRENT_MONTH：插入当前日期
${1:default}：带默认值的占位符，可编辑替换

例如创建一个带时间戳的注释头：

"File Header": { "prefix": "header", "body": [ "/**", " * File: $TM_FILENAME", " * Created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE", " */" ], "description": "插入文件头注释" }

保存文件后，切换回对应语言的编辑器，输入你设置的 prefix（如 log 或 header），就会看到自动提示，回车即可插入片段。

基本上就这些，不复杂但容易忽略细节。多写几个常用模板，比如函数封装、测试用例或组件结构，效率提升很明显。

以上就是怎样在VSCode中创建自定义代码片段？的详细内容，更多请关注php中文网其它相关文章！