VSCode如何创建代码模板 VSCode自定义代码片段的详细步骤-VSCode-PHP中文网

VSCode如何创建代码模板 VSCode自定义代码片段的详细步骤

爱谁谁

发布： 2025-07-17 15:32:01

原创

998人浏览过

使用 vscode 自定义代码片段可快速生成常用代码结构。1. 打开“用户代码片段”设置界面，通过菜单或快捷键进入配置。2. 选择语言或新建全局片段，如 my-templates.json 以支持多类型文件。3. 编写代码片段格式，包含 prefix、body、description 字段，并使用 $1、$2 等变量标记光标位置。4. 使用时输入 prefix 并回车即可插入模板，如 htmlbase 生成 html 页面骨架，reactcomp 创建 react 组件等，从而提升开发效率。

VSCode如何创建代码模板 VSCode自定义代码片段的详细步骤

新建代码文件时总要重复写一些基础结构，比如 HTML 页面的骨架、函数声明或者组件模板，这时候用 VSCode 的自定义代码片段功能就很方便。设置好之后，只要输入几个字母再按一下回车，就能自动补全一大段常用代码。

1. 打开“用户代码片段”设置界面

在 VSCode 中创建自定义代码片段，首先要进入设置界面。可以通过菜单栏的 “文件” > “首选项” > “用户代码片段”（或者 Mac 上是 “Code” > “Preferences” > “User Snippets”）。

也可以直接按下快捷键 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac），输入“Configure User Snippets”回车，然后选择是为某个语言创建片段，还是创建全局片段。

2. 选择语言或新建全局片段

VSCode 的代码片段是按语言区分的，比如你选择 javascript.json，那这个片段就只在 JavaScript 文件中生效。如果你想创建一个所有类型文件都能用的模板，可以选择“New Global Snippets file”。

比如，创建一个全局的 my-templates.json，这样你就可以在里面定义多个常用模板，比如 HTML 页面、React 组件、函数结构等等。

3. 编写代码片段格式

每个代码片段的结构都包含几个关键字段：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

173

查看详情

"prefix"：触发关键词，比如输入 htmlbase 就能触发
"body"：模板内容，支持换行和变量
"description"：描述，显示在提示中

一个简单的 HTML 模板示例如下：

"HTML Basic Template": {
  "prefix": "htmlbase",
  "body": [
    "<!DOCTYPE html>",
    "<html lang=\"en\">",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <title>$1</title>",
    "</head>",
    "<body>",
    "  $2",
    "</body>",
    "</html>"
  ],
  "description": "基本的 HTML 页面结构"
}

登录后复制

这里 $1 和 $2 是光标停留的位置，按 Tab 可以快速切换。