什么是代码片段？
代码片段（Snippets）是可以让你通过简短的缩写快速插入常用代码模板的功能。
比如输入cf然后按 Tab 键，就能自动生成：
const | = () => { | }光标会停在竖线位置，让你直接输入函数名和函数体，不用手敲每个字符。
为什么有用？
- 节省时间：不用重复输入相同的代码结构
- 减少错误：模板化的代码不容易写错
- 统一风格：团队成员可以共享 snippets，保持代码风格一致
- 提高专注度：把精力放在逻辑上，而不是语法细节
如何创建代码片段？
1. 打开 snippets 配置
按Ctrl+Shift+P，输入Preferences: Configure User Snippets，选择对应语言（比如 JavaScript）。
2. 编辑 JSON 文件
打开后会看到类似javascript.json的文件，格式如下：
{ "cf": { "prefix": "cf", "body": [ "const $1 = () => {", "\t$2", "}" ], "description": "箭头函数" } }3. 字段说明
prefix：触发快捷词body：代码模板内容（数组形式，每行一个元素）description：描述（在 IntelliSense 菜单中显示）scope（可选）：指定生效的语言范围
实用例子
1. Console.log
"log": { "prefix": "log", "body": "console.log('$1:', $1);", "description": "Console log" }使用：输入log→ 按 Tab → 输入变量名
2. Vue 组件模板
"vue3": { "prefix": "vue3", "body": [ "<template>", "\t<div>", "\t\t$1", "\t</div>", "</template>", "", "<script setup>", "import { ref } from 'vue'", "", "$2", "</script>", "", "<style scoped>", "$3", "</style>" ], "description": "Vue 3 组件模板" }3. Try-Catch
"try": { "prefix": "try", "body": [ "try {", "\t$1", "} catch (error) {", "\tconsole.error(error);", "\t$2", "}" ], "description": "Try-Catch 块" }4. React useEffect
"ue": { "prefix": "ue", "body": [ "useEffect(() => {", "\t$1", "}, [$2])" ], "description": "useEffect" }进阶技巧
1. 占位符（Tab Stops）
$1,$2,$3表示按 Tab 后光标的跳转顺序：
"cl": { "prefix": "cl", "body": "console.log($1);", "description": "Console log 变量" }2. 默认值
${1:defaultValue}可以设置占位符的默认值：
"fn": { "prefix": "fn", "body": [ "function ${1:name}(${2:params}) {", "\t$3", "}" ], "description": "函数声明" }3. 选择列表
${1|选项1,选项2,选项3|}可以创建下拉选择：
"console": { "prefix": "c", "body": "${1|console.log,console.warn,console.error|}($2);", "description": "Console 方法" }4. 变量
Snippets 支持内置变量：
"header": { "prefix": "header", "body": [ "/**", " * @author ${TM_USERNAME}", " * @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}", " * @description $1", " */" ], "description": "文件头注释" }常用变量：
TM_FILENAME：当前文件名TM_DIRECTORY：当前目录CURRENT_YEAR/CURRENT_MONTH/CURRENT_DATE：当前日期CLIPBOARD：剪贴板内容
团队协作
方法 1：项目级 snippets
在项目根目录创建.vscode/snippets.code-snippets：
{ "api": { "prefix": "api", "body": [ "import request from '@/utils/request'", "", "export const ${1:apiName} = (${2:params}) => {", "\treturn request({", "\t\turl: '/api/$3',", "\t\tmethod: '$4',", "\t\t$2", "\t})", "}" ], "description": "API 请求模板" } }方法 2：通过 Git 共享
把 snippets 文件放在团队的 dotfiles 仓库里，所有人同步使用。
常见问题
Q: 为什么按 Tab 没反应？
A: 检查以下几点：
- snippets 文件名是否正确（JS 用
javascript.json，不是bat.json） - JSON 格式是否合法（可以用在线工具验证）
- 重启 VS Code 或执行
Reload Window
Q:.vue文件能用吗？
A: 可以！Vue 文件的<script>部分会被识别为 JavaScript，所以javascript.json里的 snippets 可以用。
Q: 如何查看现有 snippets？
A:
- 按
Ctrl+Shift+P - 输入
Preferences: Configure User Snippets - 选择语言后就能看到所有已配置的 snippets
总结
代码片段是 VS Code 最强大的功能之一，花点时间配置适合自己的 snippets，长期来看能节省大量时间。
建议：
- 从常用的代码片段开始（console.log、函数声明、循环等）
- 持续积累，看到重复代码就考虑做成 snippet
- 和团队共享，统一开发体验
推荐阅读：
- VS Code 官方文档 - Snippets
- Snippet 语法参考
