如何利用用户代码片段（User Snippets）创建自定义模板？-VSCode-PHP中文网

如何利用用户代码片段（User Snippets）创建自定义模板？

狼影

发布： 2025-10-12 18:41:01

原创

549人浏览过

在VS Code中配置用户代码片段可提升编码效率。通过Ctrl+Shift+P打开命令面板，选择“Configure User Snippets”创建全局或语言专属片段，编辑JSON文件定义名称、前缀、内容和描述，利用$1、$2等占位符实现光标跳转，保存后输入前缀即可触发自动补全，支持多行内容、默认值及内置变量如${TM_FILENAME}，便于个人使用或团队共享统一开发规范。

如何利用用户代码片段（user snippets）创建自定义模板？

在 VS Code 中，用户代码片段（User Snippets）能帮助你快速生成常用代码结构。只需简单配置，就能创建属于自己的模板，提升编码效率。

打开用户代码片段设置

按下 Ctrl + Shift + P（macOS 上是 Cmd + Shift + P），输入 “Configure User Snippets”，选择对应语言或新建全局片段文件。

• 选择“New Global Snippets file”可创建跨项目通用模板
• 选择“xxx.json”（如 javascript.json）则为特定语言设置片段

编写自定义模板结构

每个片段包含名称、前缀、内容和描述。使用 Tab 键可跳转到预设占位符位置。

• "prefix" 是触发关键词，比如输入 log 可插入完整 console.log
• "body" 支持多行文本和变量，如 $1 表示第一个光标停留点
• $0 代表最终结束位置，${var:default} 可设置默认值

示例：创建一个 React 函数组件模板

Alkaid.art

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

153

查看详情

{
  "Functional Component": {
    "prefix": "rfc",
    "description": "Create a functional React component",
    "body": [
      "import React from 'react';",
      "",
      "const $1 = () => {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  );",
      "};",
      "",
      "export default $1;"
    ]
  }
}

登录后复制