VSCode 代码片段可大幅提升编码效率。一、用户级片段适用于通用逻辑，通过命令面板配置 JSON 文件实现；二、工作区片段仅限当前项目，需在。vscode/snippets/ 下创建；三、支持内置变量、正则转换、条件占位符等动态功能；四、管理时注意 prefix 长度、description 清晰性，修改后保存即生效。
VSCode 的代码片段（Snippets）能帮你省下大量重复敲代码的时间，尤其适合常用结构、组件模板或特定框架的样板代码。关键不是“能不能写”，而是“怎么写得顺手、好维护、真有用”。
一、创建你自己的用户级代码片段
这是最灵活的方式，适用于通用逻辑，比如 console.log、函数声明、React 函数组件等。
- 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Preferences: Configure User Snippets
- 选择语言（如 JavaScript）或新建全局文件（选 New Global Snippets file）
- VSCode 会生成一个
javascript.json（或snippets.code-snippets）文件，里面是 JSON 格式
例如，加一个快速打印变量名和值的 snippet：
{"log with name": { "prefix": "ln", "body": ["console.log('$1:', $1);"], "description": "console.log('varName:', varName)" } }
保存后，在 JS 文件中输入 ln + Tab，就会展开成 console.log('xxx:', xxx);，光标自动停在 xxx 位置供你编辑。
二、为特定项目定制工作区片段
如果你的团队有统一的组件结构、API 调用模式或测试写法，用工作区片段更合适——它只在当前文件夹生效，不污染全局。
- 在项目根目录创建 .vscode/snippets/ 文件夹
- 在里面新建
react-component.json（文件名随意，后缀必须是 .json） - 内容格式和用户 snippet 完全一样，但只对这个工作区生效
比如定义一个 React 函数组件骨架：
{"React FC": { "prefix": "rfc", "body": [ "const $1 = () => {", " return (", " <$2>", " $0", " </$2>", ");", "};", "", "export default $1;" ], "description": "React functional component" } }
$1 是第一个跳转位（组件名），$2 是第二个（根标签），$0 是最终光标停留处。按 Tab 键可顺序切换占位符。
三、实用技巧：让 snippet 更聪明
纯静态替换只是入门。真正提效的是带逻辑的动态内容：
- 变量支持：除了
$1，还能用${TM_FILENAME_BASE}（当前文件名无后缀）、${CURRENT_YEAR}、${CLIPBOARD}等内置变量 - 简单转换：比如把输入的
userName自动转成user-name：${1/(.*)/${1:/kebabcase}/} - 条件占位符：支持
${1:default}，没输入时显示默认值；${1?yes:no}可做简易判断（较少用，但存在） - 多行缩进自动对齐：VSCode 会根据你触发 snippet 时的缩进级别，自动调整整个代码块的缩进
四、管理和调试 snippet
写多了容易混乱，几个小建议：
- prefix 别太短（比如
c太泛），也别太长（my-awesome-react-component-boilerplate不现实），2~4 字母较平衡（rfc、useq） - description 要写清楚用途，尤其多人共用时，避免“what is this?”尴尬
- 改完 snippet 后不用重启 VSCode，保存即生效
- 如果没反应，检查 language ID 是否匹配（比如你在 TypeScript 文件里写了 JavaScript snippet，就可能不触发）
可以在命令面板运行 Developer: Toggle Developer Tools 查看控制台是否有 snippet 加载错误。
基本上就这些。不需要写插件、不用编译，改个 JSON 就能立刻提升日常 编码 节奏。关键是从小处开始——先把你每天敲 5 遍以上的结构做成 snippet，慢慢叠加，效率自然上来。
