VSCode用户片段制作创建VSCode常用代码块模板教程-VSCode-PHP中文网

VSCode用户片段制作创建VSCode常用代码块模板教程

星夢妙者

发布： 2025-07-16 18:57:02

原创

1092人浏览过

要提升 vscode 编程效率，可利用用户片段功能创建常用代码块模板。具体步骤如下：1. 打开用户片段设置：通过菜单或快捷键进入“configure user snippets”，选择对应语言；2. 编辑 json 文件添加代码片段，包含触发词（prefix）、内容（body）、描述（description）及光标位置（$1、$2等）；3. 按需使用多语言通用片段、变量（如${tm_filename}）及测试技巧，避免与插件冲突。例如配置 vue 单文件组件模板，输入前缀即可展开结构并按 tab 填写内容，大幅提升编码速度。

VSCode用户片段制作创建VSCode常用代码块模板教程

用 VSCode 的用户片段功能，能省下不少重复敲代码的时间。特别是当你写项目时经常用到某些固定结构的代码块，比如 HTML 页面结构、函数模板、组件定义等等，这时候提前配置好代码片段，输入几个字母就能自动补全，效率直接拉满。

下面我就一步步教你怎么在 VSCode 里创建属于自己的常用代码块模板。

如何打开用户片段设置

VSCode 的代码片段是按语言来组织的。你需要先打开对应语言的片段配置文件。

打开方式如下：

Windows / Linux：文件 > 首选项 > 用户代码片段（或者按 Ctrl + Shift + P，输入“Configure User Snippets”）
macOS：Code > 首选项 > 用户代码片段

然后选择你要设置的语言，比如 JavaScript、HTML 或者 TypeScript 等等。VSCode 会打开一个 JSON 文件，你可以在这里添加自己的代码片段。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

代码片段的基本结构

一个最简单的代码片段长这样（以 HTML 为例）：

"Print to console": {
  "prefix": "log",
  "body": [
    "console.log('$1');",
    "$2"
  ],
  "description": "Log output to console"
}

登录后复制

prefix：你输入的触发词，比如输入 log 然后按 Tab 就会插入代码
body：要插入的代码内容，可以是多行数组
description：提示信息，会在自动补全时显示出来
$1、$2：是光标停留的位置，按 Tab 可以依次跳转

举个实际的例子：如果你经常写 Vue 单文件组件，可以加一个 vuecomp 的片段：

"Vue Single File Component": {
  "prefix": "vuecomp",
  "body": [
    "<template>",
    "  <div class=\"$1\">",
    "    $2",
    "  </div>",
    "</template>",
    "",
    "<script>",
    "export default {",
    "  name: '$3',",
    "  data() {",
    "    return {",
    "      $4",
    "    }",
    "  }",
    "}",
    "</script>",
    "",
    "<style scoped>",
    ".$1 {",
    "  $5",
    "}",
    "</style>"
  ],
  "description": "Vue 单文件组件模板"
}

登录后复制

这样你只需要输入 vuecomp 然后按 Tab，就能快速生成一个完整结构，再按 Tab 依次填写内容。