ES7+ React/Redux Snippets插件默认启用，但rfc等片段仅在.js/.jsx/.ts/.tsx文件中生效，需确保语言模式为JavaScript React或TypeScript React；常用前缀包括rfc（函数组件）、cc（类组件）、useEffect和useState等。
ES7+ React/Redux Snippets 怎么触发组件代码片段
这个插件默认启用，但很多人输 rfc 没反应，其实是没在 .js 或 .tsx 文件里——它只在 JavaScript/TypeScript 文件中生效，且需确保文件后缀是 .js、.jsx、.ts 或 .tsx。
常用前缀示例：
-
rfc→ 生成函数组件（Functional Component）框架，光标停在组件名位置 -
cc→ 类组件（Class Component），含render()和constructor -
useEffect→ 自动插入带依赖数组的useEffect，$1占位符在回调体，$2在依赖数组 -
useState→ 插入const [state, setState] = useState($1)，$1默认为null
注意：如果项目用的是 Prettier + ESLint 组合，生成后可能立刻被格式化或报错（比如 useState 缺少类型注解）。建议先确认 editor.formatOnSave 是否开启，再决定是否在片段中预置类型（如 useState<string>('')）。
自定义代码片段怎么避免覆盖官方插件
VS Code 允许用户级和工作区级 snippets，但优先级有顺序：工作区 > 用户 > 语言内置。直接改 javascript.json 可能被插件更新重置，更稳妥的做法是新建专属 snippet 文件。
操作步骤：
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入Preferences: Configure User Snippets - 选
New Global Snippets file...，起名如react-custom.code-snippets - 填入结构，例如为自定义 Hook 添加前缀
hook：
{"Custom useFetch": {
"prefix": "hook:fetch",
"body": [
"const [$1, set$1] = useState($2);",
"useEffect(() => {",
" const fetchData = async () => {",
" try {",
" const res = await fetch('$3');",
" const data = await res.json();",
" set$1(data);",
" } catch (err) {",
" console.error(err);",
" }",
" };",
" fetchData();",
"}, [$4]);"
],
"description": "自定义数据获取 Hook"
}}
这样既不干扰 ES7+ React/Redux Snippets 的原始行为，又能快速复用高频逻辑。别忘了把 、 这类占位符按实际跳转顺序编号，否则 Tab 键切换会错位。
为什么 Tab 切换占位符有时失效
常见原因不是插件问题，而是当前编辑器焦点不在代码区域，或片段被其他扩展拦截（比如某些 AI 插件会劫持 Tab 行为）。最直接的验证方式：新建一个空 .js 文件，输入 rfc + Tab，看能否展开并跳转。
若仍失败，检查以下几项：
-
editor.suggest.snippetsPreventQuickSuggestions是否为false（默认值，设为true会禁用片段自动补全） - 有没有启用
emeraldwalk.runonsave类插件，在保存时触发命令导致焦点丢失 - 终端或调试控制台是否处于激活状态——VS Code 的 Tab 行为严格绑定当前活动面板
临时绕过方法：用 Ctrl+Space 手动唤出建议列表，再用方向键选择片段，比纯 Tab 更稳定。
AI 插件（如 CodeGeex）和传统 snippet 冲突怎么办
CodeGeex 默认用 Alt+[ / Alt+] 切换候选代码，和 VS Code 原生的 Ctrl+Shift+P 命令面板不冲突；但它生成的代码块如果含占位符（如 ${1}），会被当作普通文本而非 snippet 变量处理——即无法用 Tab 跳转。
实用策略：
- 用 CodeGeex 生成主干逻辑，再手动套一层自定义 snippet 封装（比如把生成的函数包裹进
export default function $1() { $0 }） - 关闭 CodeGeex 的「自动插入」选项，在设置里设为「仅预览」，确认无误后再粘贴，避免污染光标位置
- 对高频生成模式（如 API 调用），直接写成 snippet，比反复调 AI 更快也更可控
真正卡点在于：snippet 是确定性模板，AI 是概率性输出。混用时，优先让 snippet 承担结构，AI 填充内容细节——比如用 rfc 搭骨架，再让 CodeGeex 补 useQuery 那一段。
