VSCode代码片段是提升编码效率的轻量工具，通过JSON配置可复用模板，支持全局或按语言定制、变量占位与跳转；需注意前缀避免冲突，修改实时生效。

vscode 的代码片段（snippets）是你提升编码效率最直接、最轻量的工具之一——不用装插件，写几行 json 就能复用常用结构，比如组件模板、循环骨架、接口定义，甚至带变量占位和跳转顺序的交互式代码块。

一、快速创建一个全局代码片段

按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Preferences: Configure User Snippets，回车后选择 New Global Snippets file…，起个名字（如 my-react），就会生成一个 my-react.code-snippets 文件。

在里面写一个基础片段示例：

保存后，在任意 JS/TS 文件中输入 logt + Tab，就能展开并自动定位编辑点。

二、为特定语言单独配置片段

更推荐的方式是按语言定制：同样打开命令面板，选 Configure User Snippets，这次选具体语言（如 javascript.json 或 typescriptreact.json）。VSCode 会为你打开对应语言的片段文件。

比如在 typescriptreact.json 中添加一个函数组件模板：

注意：${1:xxx} 表示第一个跳转位置，${2:yyy} 是第二个，依此类推；相同数字（如多个 ${1:…}）会同步编辑。

三、实用技巧和常见写法

• 换行和缩进：用 \n 换行，但 VSCode 片段会自动根据当前文件缩进补空格，所以写 body 时保持自然缩进即可（如上面例子中用 2 空格对齐）
• 插入当前文件名：用 $TM_FILENAME_BASE，适合写默认导出名或样式类名
• 条件判断不支持：Snippets 是静态模板，不能 if/else；复杂逻辑建议用扩展（如 ESLint + Code Actions）或自定义脚本
• 避免冲突前缀：别用太短或太通用的 prefix（如 if、for），VSCode 自带很多同名片段，容易覆盖或误触发

四、管理与调试小贴士

片段文件保存在 VSCode 配置目录下（可通过 Developer: Open Settings (JSON) 找到路径），修改后实时生效，无需重启。

如果片段没出现，检查以下几点：

• 文件名是否带 .code-snippets 后缀（全局）或是否放在对应语言的 JSON 文件里（语言级）
• 当前文件的语言模式是否匹配（右下角看是不是 JavaScript / TypeScript React 等）
• prefix 是否拼错，或者被其他扩展的 snippet 覆盖（可安装 Snippet Generator 插件辅助测试）

基本上就这些。写得越贴近你每天写的结构，用起来就越顺手——不必追求大而全，从最常敲的 3–5 个模板开始，慢慢叠加上去。