如何为VSCode设置自定义代码片段？-VSCode-PHP中文网

如何为VSCode设置自定义代码片段？

狼影

发布： 2025-10-13 23:40:01

原创

903人浏览过

设置自定义代码片段可提升VSCode编码效率，需创建JSON格式文件并定义触发词、内容和描述；通过“用户代码片段”选项选择语言或创建全局片段，编辑对应JSON文件添加名称、prefix、body和description；例如输入"log"可生成console.log语句，使用$1、$2控制光标位置，支持$TM_FILENAME等变量；保存后在对应语言中输入prefix即可触发智能提示，注意JSON语法正确。

如何为vscode设置自定义代码片段？

为 VSCode 设置自定义代码片段，能大幅提升编码效率。你只需创建一个 JSON 格式的片段文件，定义触发词、内容和描述即可。

打开用户代码片段配置

在 VSCode 中，点击菜单栏的 文件 > 首选项 > 用户代码片段（Windows/Linux），或 Code > 首选项 > 用户代码片段（macOS）。接着会提示你选择语言，比如输入 “javascript” 或 “html”，VSCode 会为你生成对应语言的 snippet 文件。

编写自定义代码片段

在打开的 JSON 文件中，你可以添加自己的代码片段。每个片段包含名称、触发词、实际内容和描述。例如，设置一个快速生成 console.log 的 JavaScript 片段：

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

说明：

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

prefix：输入这个关键词时触发自动补全
body：实际插入的代码，$1、$2 是光标停留位置，$1 是第一个停靠点
description：在建议列表中显示的提示信息

使用 Tab 键跳转与变量支持

在 body 中可以使用 $1、$2 表示光标顺序跳转的位置。你也可以插入环境变量，如 $TM_FILENAME（当前文件名）、$CURRENT_YEAR 等。例如：

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