代码片段是VSCode中可复用的智能模板，通过触发关键词快速插入带占位符和变量的代码块。例如输入log按Tab生成console.log()，光标自动定位。创建自定义片段需在命令面板打开“Configure User Snippets”，选择语言后编辑JSON格式规则，包含prefix（触发词）、body（代码内容）、description（提示）等字段。如“reactfc”可生成React函数组件模板，$1、$2为光标跳转点且联动命名。高级技巧包括使用内置变量$TM_FILENAME、$CURRENT_YEAR添加文件名和日期，或用${1:default}设置默认值。团队可将片段存于项目.vscode/snippets目录并提交，统一编码规范。推荐从高频结构入手，逐步构建高效开发习惯。
写代码时，重复敲相同的结构不仅耗时还容易出错。VSCode 的代码片段（Snippets）功能能帮你把常用代码模式保存成智能模板，输入几个字母就能展开成完整代码块，还能带占位符、变量和逻辑控制。用好这个功能，写代码就像搭积木一样快。
什么是代码片段？
代码片段是可复用的代码模板，支持动态字段、默认值和快捷插入。在 VSCode 中，你可以为不同语言创建专属片段，比如 JavaScript、Python 或 HTML。当你在编辑器中输入触发关键词并按 Tab，片段就会自动展开。
例如，输入 log 按 Tab，自动生成 console.log()，光标自动落在括号内——这种小细节每天能省下几十次按键。
如何创建自定义代码片段？
打开 VSCode 命令面板（Ctrl+Shift+P），输入 “Configure User Snippets”，选择对应语言，比如 “javascript.json”，然后就可以编辑 JSON 格式的片段规则。
每个片段包含以下关键字段：
- 名称：片段的描述，不参与触发
- prefix：触发关键词，输入它才能展开片段
- body：实际插入的代码内容，支持多行
- description：鼠标悬停时显示的提示
示例：创建一个 React 函数组件模板
{ "Create React Component": { "prefix": "reactfc", "body": [ "import React from 'react';", "", "const $1 = () => {", " return (", "输入 reactfc 后按 Tab，组件结构立刻生成， 是光标初始位置，也是命名同步点（出现两次会联动）， 是第二个跳转点。
提升效率的高级技巧
别只停留在静态模板，VSCode 片段支持变量和占位符，让模板更智能。
- 内置变量：如 $TM_FILENAME 插入当前文件名，$CURRENT_YEAR 插入年份，适合写注释头
- 嵌套占位符：比如 ${1:default}，表示第一个跳转位置，默认值是 default，可修改
- 代码逻辑模拟：虽然不能写函数，但可用多个占位符模拟条件结构，比如快速生成带 try-catch 的代码块
例子：添加带作者信息的注释头
"File Header": { "prefix": "header", "body": [ "/**", " * File: $TM_FILENAME", " * Author: Your Name", " * Created: $CURRENT_DATE", " */" ] }团队协作与片段共享
代码片段不仅能个人用，还能统一团队编码风格。把项目级片段放在 .vscode/snippets/ 目录下，配合 settings.json 提交到仓库，新成员克隆后立即拥有相同模板。
也可以导出常用片段打包分享，或者使用插件市场已有的高质量片段包，比如 “JavaScript (ES6) Code Snippets” 就广受好评。
基本上就这些。花半小时配置几个高频片段，长期来看能省下大量重复劳动。关键是动手试，从最常用的代码结构开始，慢慢积累自己的高效武器库。
