VSCode自定义代码片段不生效的主因是语言模式（language ID）与scope不匹配、JSON语法错误或body格式不规范；需确认右下角语言标识、验证JSON结构、检查scope精确性及缩进一致性。
VSCode 自定义代码片段不是“配完就自动好用”的功能，它高度依赖语言模式匹配和 JSON 结构的准确性；配错一个引号、少一个逗号、或右下角语言标错了，prefix 就完全不触发。
为什么你的 snippet 总是不生效？
最常被忽略的是语言模式（language mode）不匹配。VSCode 不看文件后缀，只认编辑器右下角显示的语言标识——哪怕你打开的是 index.tsx，如果状态栏显示的是 Plain Text 或 Vue，你为 typescriptreact 写的 snippet 就不会加载。
- 点击右下角语言标签，手动切换成正确语言（如
TypeScript React、JavaScript、Vue） -
global.code-snippets只在当前文件没指定语言时 fallback 使用，别指望它覆盖所有场景 - 装了 Vetur / Vue Language Features 后，
.vue文件默认走vue模式，需单独配vue.code-snippets，不能复用html或javascript - 修改 snippet 文件后无需重启 VSCode，但已打开的同名文件可能缓存旧配置，关掉再重开该文件更可靠
如何创建一个 React 函数组件 + TypeScript 的 snippet
这类结构固定、手敲冗余度高，适合封装。关键是把类型参数、props 解构、JSX 返回体都纳入模板，同时留出灵活替换点。
在命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）中输入并选择 Preferences: Configure User Snippets → 选 typescriptreact.json（不是 javascript.json）→ 粘贴如下内容：
{
"React FC with Props": {
"prefix": "rfc",
"body": [
"const $1 = ({ $2 }: { $2: $3 }): JSX.Element => {",
" return (",
" <$4>",
" $0",
" </$4>",
" );",
"};",
"",
"export default $1;"
],
"description": "React functional component with typed props"
}
}
-
$1是组件名，Tab 后第一个跳转位置 -
$2是 props 字段名（如user），$3是其类型（如UserProps），留空比写死any更实用 -
$0是最终光标位置，放在 JSX 内容区，方便立刻写子元素 - 注意缩进用空格对齐，不要混用 Tab，否则 Prettier 保存时可能破坏结构
全局 snippet 和语言 snippet 怎么选？
全局 snippet（global.code-snippets）看似方便，实则容易误触发、难维护。真正高效的做法是按语言精准投放。
- 通用型模板（如文件头注释、
console.log）可放全局，但要加"scope": "javascript,typescript,typescriptreact"显式限定 - 框架/语法专属模板（如 Vue 的
<script setup>、React 的useEffect）必须用语言专属文件，避免污染其他语言上下文 - 工作区级 snippet（
.vscode/snippets/xxx.code-snippets）适合团队统一规范，但优先级高于用户级，容易被覆盖，慎用 - 扩展自带的 snippet（如 ES7+ React 插件）通常已覆盖高频场景，先确认是否已有，再决定是否自建
真正卡住人的从来不是怎么写 JSON，而是语言模式是否对、scope 是否写全、以及 body 中换行缩进是否和项目格式化规则兼容——这三点漏掉任意一个，snippet 就只是个静态文本，不会跳转，也不会插入。
