VSCode用户代码片段通过JSON文件配置实现，需在命令面板中选择Preferences: Configure User Snippets创建全局或语言专属文件，正确设置prefix、body（支持占位符$1、$0等）、description及scope字段，并注意UTF-8编码与变量使用限制。
VSCode 的用户代码片段不是靠“新建文件模板”实现的，而是通过 code-snippets JSON 文件定义触发行为——直接改配置比装插件更轻量、更可控。
怎么创建一个全局可用的用户代码片段
打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入并选择 Preferences: Configure User Snippets，然后选 New Global Snippets file...。文件名随意，比如 react-utils.code-snippets，保存后会自动打开一个 JSON 文件。
- 每个片段必须放在顶层对象的一个键下，键名是片段 ID（如
logt），不参与触发，仅作标识 -
"prefix"是你输入时要敲的关键字（如输入logt后按Tab） -
"body"是插入的内容，支持多行字符串和占位符（如$1、$2、${1:default}） -
"description"会显示在 IntelliSense 提示里，别留空
如何让片段支持变量名自动同步和光标跳转
占位符不是简单编号就行—— 和 表示不同位置，但相同数字（如都写 ）会让多个位置联动编辑；用 ${1:name} 可设默认值，<p>占位符不是简单编号就行——<code>$1 和 $2 表示不同位置，但相同数字（如都写 $1）会让多个位置联动编辑；用 ${1:name} 可设默认值，$0 是最终光标停留点。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- 例如定义一个 React 组件片段：
"body": ["const ${1:ComponentName} = () => {", " return <div>${2:content}</div>;", "};", "", "export default ${1:ComponentName};"] - 输入
comp→ Tab → 输入组件名 → Tab → 编辑内容 → Tab → 自动跳到export行末 - 注意：JSON 中换行必须用
\n或拆成数组，不能直接回车（否则语法错误）
为什么自定义片段没出现在提示里
常见原因不是配置错，而是触发上下文不匹配。VSCode 默认只在特定语言模式下激活对应片段，即使你写了全局文件，也得加 "scope" 字段或放到语言专属文件中。
- 全局片段默认无语言限制，但如果加了
"scope": "javascript,typescript"，它就只在 JS/TS 文件生效 - 更稳妥的做法：用
Configure User Snippets选具体语言（如javascript.json），这样不用手动配scope - 检查文件编码是否为 UTF-8，BOM 头会导致加载失败（VSCode 不报错，但片段静默失效）
- 修改后无需重启，但已打开的编辑器可能缓存旧片段，可试
Developer: Reload Window
能不能让片段读取当前文件名或路径
不能直接读，但 VSCode 提供了有限的预定义变量：$TM_FILENAME_BASE（不含扩展名的文件名）、$TM_DIRECTORY、$CLIPBOARD 等，可在 body 中直接使用。
- 例如在
javascript.json中写："testfile": {"prefix": "testf","body": ["describe('$TM_FILENAME_BASE', () => {", " $0", "});"]} - 在
utils.js中输入testf→ Tab，自动展开为describe('utils', () => { ... }); - 注意：这些变量只在片段插入瞬间求值，不支持运行时计算或条件判断
真正难调的不是语法，而是占位符顺序和作用域冲突——比如两个同名 prefix 在不同语言文件里，VSCode 会随机生效一个；建议用语义化前缀（如 rc-log、rc-comp）避免覆盖。
