VSCode代码片段是无需插件的轻量级效率工具，通过JSON配置实现按语言或全局定制，支持占位符、预定义变量和下拉选项等智能功能，保存后即时生效。
VSCode 的代码片段（Snippets）是提升编码效率的轻量级利器——不用装插件、不依赖外部工具，几行 JSON 就能把你常用的结构化代码变成一键插入的模板。
如何创建自定义代码片段
VSCode 支持为每种语言单独配置片段，也支持全局通用片段。最常用的是按语言定制：
- 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Preferences: Configure User Snippets
- 选择目标语言（如 JavaScript）或新建全局文件（选 New Global Snippets file）
- 在打开的 JSON 文件中，按格式添加片段对象，每个片段以唯一键名开头，包含
prefix（触发词）、body（插入内容）、description（提示说明）
例如，为 React 函数组件写一个 snippet：
{ "React Functional Component": { "prefix": "rfc", "body": [ "const $1 = () => {", " return (", " ", " $0", " $2>", " );", "};", "", "export default $1;" ], "description": "Create a React functional component" } }理解 body 中的占位符逻辑
代码片段的 body 是字符串数组，每项代表一行。VSCode 用特殊变量控制光标位置和跳转顺序：
-
$0是最终光标停留位置（插入后按 Tab 可跳到这里） -
$1、$2等是可跳转的编辑点，按 Tab 顺序切换；相同数字表示同步修改（如两个$1会同时被替换成同一内容） -
${1:default}表示带默认值的占位符，插入时高亮显示default，可直接输入覆盖 -
$TM_FILENAME_BASE这类预定义变量可自动填入当前文件名（不含后缀），适合生成同名组件或类
让片段更智能：支持条件与简单逻辑
原生 Snippets 不支持 if/else，但可通过预设变量和占位符组合模拟常用场景：
- 用
${1|props,children,none|}创建下拉选择，插入时弹出选项菜单（仅限 VSCode 1.80+） - 组合
$TM_FILENAME_BASE和$1实现「文件名作组件名 + 自定义 props」，比如：const ${1:$TM_FILENAME_BASE} = (${2:props}) => { - 多行 body 中空行保留，缩进用空格或制表符（建议统一用 2 空格，适配多数 JS/TS 格式化规则）
快速启用与调试技巧
片段写完不会立即生效，注意几个细节：
- 保存 JSON 文件后，无需重启 VSCode，新片段立刻可用
- 在对应语言的编辑器中输入 prefix（如
rfc），按下 Enter 或 Tab 即可展开 - 如果没反应，检查文件是否保存、语言模式是否匹配（右下角确认是 JavaScript 而非 Plain Text）
- 想查看所有已启用的片段？输入
Ctrl+Space呼出智能提示，筛选含 prefix 的条目
基本上就这些。不需要复杂配置，也不用记一堆快捷键——把重复写的结构变成几个字母，效率提升就藏在每天几十次的 Tab 按下里。
