什么是代码片段代码片段Snippets是可以让你通过简短的缩写快速插入常用代码模板的功能。比如输入cf然后按 Tab 键就能自动生成const | () { | }光标会停在竖线位置让你直接输入函数名和函数体不用手敲每个字符。为什么有用节省时间不用重复输入相同的代码结构减少错误模板化的代码不容易写错统一风格团队成员可以共享 snippets保持代码风格一致提高专注度把精力放在逻辑上而不是语法细节如何创建代码片段1. 打开 snippets 配置按CtrlShiftP输入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.loglog: { prefix: log, body: console.log($1:, $1);, description: Console log }使用输入log→ 按 Tab → 输入变量名2. Vue 组件模板vue3: { prefix: vue3, body: [ template, \tdiv, \t\t$1, \t/div, /template, , script setup, import { ref } from vue, , $2, /script, , style scoped, $3, /style ], description: Vue 3 组件模板 }3. Try-Catchtry: { prefix: try, body: [ try {, \t$1, } catch (error) {, \tconsole.error(error);, \t$2, } ], description: Try-Catch 块 }4. React useEffectue: { 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.jsonJSON 格式是否合法可以用在线工具验证重启 VS Code 或执行Reload WindowQ:.vue文件能用吗A: 可以Vue 文件的script部分会被识别为 JavaScript所以javascript.json里的 snippets 可以用。Q: 如何查看现有 snippetsA:按CtrlShiftP输入Preferences: Configure User Snippets选择语言后就能看到所有已配置的 snippets总结代码片段是 VS Code 最强大的功能之一花点时间配置适合自己的 snippets长期来看能节省大量时间。建议从常用的代码片段开始console.log、函数声明、循环等持续积累看到重复代码就考虑做成 snippet和团队共享统一开发体验推荐阅读VS Code 官方文档 - SnippetsSnippet 语法参考