VSCode代码片段是通过触发词快速插入预设代码模板的功能。打开命令面板输入“配置用户代码片段”，选择语言后在JSON文件中定义prefix、body和description，支持$1、$2光标跳转及变量插入，保存后在对应文件输入触发词即可生成代码，提升开发效率。
在日常开发中，重复编写相似代码会降低效率。VSCode 的代码片段（Snippets）功能能帮你把常用代码结构保存为快捷模板，一键生成，大幅提升编码速度。掌握这一功能，是每个开发者提升效率的关键一步。
什么是 VSCode 代码片段？
代码片段是一段可重用的代码模板，通过一个简短的触发词快速插入到编辑器中。VSCode 支持为不同语言创建专属片段，比如 JavaScript、Python、HTML 等，还能包含占位符、变量和格式化逻辑，让插入的代码更灵活。
例如：输入 log 后按 Tab，自动生成 console.log() 并将光标定位在括号内。
如何创建自定义代码片段
你可以为当前项目或整个用户环境添加个性化片段。以下是具体步骤：
- 打开命令面板：按下 Ctrl+Shift+P（macOS 上是 Cmd+Shift+P）
- 搜索 “Configure User Snippets”，选择“首选项：配置用户代码片段”
- 选择目标语言（如 javascript.json）或创建全局片段文件
- 在打开的 JSON 文件中添加你的片段定义
示例：为 JavaScript 创建一个函数片段
"Create a function": {
"prefix": "func",
"body": [
"function ${1:functionName}(${2:args}) {",
" ${0:// body}",
"}"
],
"description": "生成一个函数模板"
}保存后，在 .js 文件中输入 func，就会自动补全模板，光标依次停在函数名、参数和函数体位置。
片段语法详解：提升灵活性
VSCode 片段支持多种动态元素，让模板更智能：
- $1, $2, $0：表示制表位顺序，$0 是最后一个光标位置
- ${1:default}：带默认值的占位符
- ${TM_FILENAME}：插入当前文件名
- ${CURRENT_YEAR}：插入当前年份，适合写注释头部
- 支持多行与缩进：JSON 中用数组每一项代表一行
实用案例：组件模板片段
```json "React Component": { "prefix": "comp", "body": [ "import React from 'react';", "", "const ${1:ComponentName} = () => {", " return (", "${2:content}
",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "创建一个函数式 React 组件"
}
```
管理与共享你的片段
片段存储在本地 JSON 文件中，路径通常为：
- 用户级：~/.vscode/snippets/
- 项目级：.vscode/ 目录下
你可以将这些文件加入版本控制，团队成员共享统一开发规范。也可以导出自己的片段集，迁移到新设备或发布为推荐配置。
基本上就这些。合理使用代码片段，能让你少敲几百次键盘，专注真正重要的逻辑设计。不复杂但容易忽略。
