Code Snippets

一、什么是 Code Snippets

Code Snippets（代码片段 / 代码模板），是编辑器、IDE 内置的一段预定义可复用代码模板，输入简短缩写（触发词），按快捷键就能自动补全一大段标准模板代码，省去重复抄写固定结构代码。

简单理解：代码快捷模板。

核心作用

1. 减少重复编码（循环、函数、判断、类、接口、HTML 骨架等）
2. 统一团队代码格式、规范
3. 提升编码速度，减少手敲拼写错误
4. 自带占位符，Tab 一键切换填写参数

二、主流支持工具

几乎所有开发编辑器 / IDE 都原生支持：

1. VS Code（最常用，自定义 Snippets 极强）
2. JetBrains 全家桶：IDEA、PyCharm、WebStorm
3. Sublime Text
4. Vim / Neovim
5. VS 2022、Eclipse

三、基础使用逻辑（以 VS Code 举例）

1. 内置自带 Snippets

开箱即用，无需配置：

• HTML：输入 html → Tab，生成完整 HTML5 页面骨架
• JavaScript：for、if、fun 快速生成循环 / 函数
• Python：def、for、try
• Vue/React：vfor、useState

2. 触发规则

1. 输入简写关键词
2. 弹出提示框选中片段，按下 Tab 展开完整代码
3. 展开后会出现高亮占位符，按 Tab 快速切换每个需要修改的变量

示例 JS 片段：log

输入 log + Tab，直接生成：

javascript

运行

console.log($1);

光标自动停在 $1 位置，直接填打印内容。

四、自定义 Code Snippets（VS Code）

可以自己编写专属代码模板，分三种作用域：

1. 全局片段：所有文件通用
2. 语言专属片段：仅 JS/Python/HTML 等指定语言生效
3. 项目本地片段：只当前项目可用，团队共享规范

语法规则（JSON 格式）

字段说明：

• prefix：触发缩写（输入这个词调出片段）
• body：模板代码，$1 $2 $0 是占位符
  • $1：第一个光标位置
  • $0：最后光标位置
• description：片段描述提示

示例：自定义 Vue3 setup 模板

json

"Vue3 Setup Template": {
  "prefix": "vue3setup",
  "body": [
    "<script setup lang=\"ts\">",
    "const $1 = ref('')",
    "</script>",
    "",
    "<template>",
    "  <div>$2</div>",
    "</template>",
    "",
    "<style scoped>",
    "",
    "</style>"
  ],
  "description": "快速生成Vue3 ts setup页面"
}

五、第三方 Snippets 插件

社区封装好的大量片段，直接安装即用，不用自己写：

1. JavaScript/TS：JavaScript and TypeScript Nightly、ES7+ React/Redux snippets
2. Vue：Vue VSCode Snippets
3. Python：Python Snippets
4. 后端：NodeJS Snippets、Java Spring Snippets

六、优缺点

优点

1. 极速写模板代码，大幅提升开发效率
2. 统一代码风格，新手也能写出规范代码
3. 支持多占位符跳转，交互流畅
4. 自定义灵活，适配个人 / 团队编码习惯
5. 项目级片段可团队统一共享

局限

1. 复杂动态逻辑无法替代，仅适用于固定模板代码
2. 过多自定义片段会造成提示栏杂乱
3. 语法有学习成本，新手初次自定义需要熟悉 JSON 占位符规则

七、和其他工具区分

1. Snippets vs 代码补全 (Intellisense) Snippets 是整块固定模板；智能补全是根据上下文提示变量、方法。二者互补。
2. Snippets vs 模板工程 (Template) Snippets 是小段代码；项目模板是完整初始化项目脚手架。

八、典型使用场景

1. 前端：HTML 骨架、Vue/React 组件、接口请求模板
2. 后端：接口函数、异常捕获、数据库查询模板
3. 脚本：Python 循环、文件读写、日志打印
4. 测试：单元测试模板、断言代码