VSCode的代码片段（Snippets）怎么创建和使用？

答案：在VSCode中创建代码片段可提升编码效率。通过命令面板打开用户片段配置，选择语言或创建全局片段，在JSON文件中定义prefix、body、description等字段，支持变量占位符如$CURRENT_YEAR、$TM_FILENAME，保存后输入前缀即可触发补全，光标按Tab键跳转占位，选中文本可用${SELECTION}包裹，片段存于本地配置目录可跨设备复用，需注意JSON格式正确。

在 VSCode 中创建和使用代码片段（Snippets）能大幅提升编码效率。你只需定义一段常用代码模板，输入简短前缀就能自动补全成完整结构。整个过程不需要安装插件，VSCode 原生支持。

如何创建代码片段

你可以为特定语言或全部语言创建全局片段。以 JavaScript 为例：

例如，创建一个名为 log 的 console.log 模板：

{
  "Console Log": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$0"
    ],
    "description": "Log message to console"
  }
}

字段说明：

• prefix：触发补全的关键字，比如输入 log 就会提示
• body：实际插入的代码内容，支持多行
• $1、$2：制表位，按 Tab 键可依次跳转
• $0：最后光标停留位置
• description：提示信息，出现在智能感知中

支持变量和占位符

代码片段支持动态内容，比如当前文件名、时间、选区等：

• $TM_FILENAME：当前文件名
• $CURRENT_YEAR：当前年份（如 2024）
• ${1:default}：带默认值的占位符，编辑时可修改
• ${SELECTION}：选中的文本（适合包裹操作）

示例：创建一个带时间戳的注释片段：

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

"Timestamp Comment": {
  "prefix": "tsc",
  "body": [
    "// Updated on $CURRENT_DATE at $CURRENT_TIME by $USERNAME",
    "$0"
  ],
  "description": "Insert timestamp with username"
}

如何使用代码片段

保存后立即生效。在对应语言的文件中：

• 输入你设置的 prefix（如 log）
• VSCode 会弹出补全建议
• 按下 Tab 或 Enter 插入代码
• 光标会停在 $1 位置，继续按 Tab 跳转到下一个占位符

如果是为选中文本创建的片段（如用 ${SELECTION}），先选中内容再输入 prefix，它会自动包裹选中部分。

片段存储位置

用户片段保存在本地配置目录：

• Windows：%APPDATA%\Code\User\snippets\
• macOS：~/Library/Application Support/Code/User/snippets/
• Linux：~/.config/Code/User/snippets/

可以备份这些文件，在其他设备上复用你的常用片段。

基本上就这些。不复杂但容易忽略细节，比如 JSON 格式要正确、逗号不能多余。写几个常用片段后，你会发现写重复代码的时间少了很多。

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