React开发中常用的VSCode快捷键与代码片段触发-VSCode-PHP中文网

输入log按tab没反应，是因为vscode默认不启用tab补全，需将editor.tabcompletion设为"on"或"onlysnippets"，并确保语言模式为javascript react，且已手动按tab或enter确认补全。

react开发中常用的vscode快捷键与代码片段触发

VSCode 的代码片段不会自动插入，必须手动确认。输入 log 后没生成 console.log()，大概率不是插件没装，而是你没按 Tab 或 Enter —— 它只是出现在补全列表里，不按键就不会展开。

右下角语言模式必须是 JavaScript React（不是 Plain Text 或 JavaScript），否则 rcc、rfc 这类 React 片段根本不会加载
editor.tabCompletion 设置必须为 on，否则即使输入了 log 也只会高亮候选，不会直接插入
如果始终不出现候选，检查 javascriptreact.json 是否保存成功，一个多余的逗号或漏掉的引号会让整个文件失效

React 类组件和函数组件模板（如 rcc、rfc）依赖插件（如 ES7+ React/Redux snippets），但它们的生效范围取决于你把片段写在哪。

typescript-dev

使用 Vite 8、React 19、Tailwind CSS v4、shadcn/ui、Biome、Vitest 和 Hono 构建全栈 TypeScript 应用，涵盖前端（Vite/Rolldown 构建 + 开发）...

下载

用户级全局片段应存于 javascriptreact.json（不是 javascript.json），后者只对 .js 文件生效，而 .jsx 文件默认用 JavaScript React 模式
如果你在 .tsx 文件里想用 rfc，得确保片段定义中包含 "scope": "typescriptreact"，否则它压根不会被加载
工作区级片段优先级高于用户级，若项目根目录有 .vscode/snippets/javascriptreact.json，它会覆盖全局设置

自己写 React 组件模板时，$1、$2 这些光标占位符和换行缩进不匹配，会导致插入后格式混乱、光标跳到奇怪位置。

body 中每行开头的空格必须用 \t 或实际空格对齐，VSCode 不会自动修正缩进；混合使用制表符和空格极易让 JSX 嵌套错位
$0 必须显式声明，否则光标停在最后一行末尾，而不是你想编辑组件名的位置；比如 "class $1 extends Component" 后应接 $0，否则你得手动把光标挪回去
避免在 body 中写注释行（如 // 函数组件），某些旧版 VSCode 会把注释当有效代码插入，破坏 JSX 结构

手动唤出补全列表（Ctrl+Space）失败，不一定代表片段没加载，更可能是快捷键冲突或语言服务未就绪。

安装了 Prettier、ESLint 或 TypeScript 插件后，有时 Ctrl+Space 会被重映射为“触发格式化建议”，而非通用补全；可在键盘快捷键设置里搜索 triggerSuggest 确认绑定
刚打开大项目时，TypeScript 语言服务器可能还在初始化，此时 Ctrl+Space 只显示基础符号，等几秒再试
如果只在 JSX 标签内（如 <div>）按 <code>Ctrl+Space 没反应，说明当前上下文被识别为 HTML 而非 React —— 检查文件后缀是否为 .jsx 或 .tsx，以及右下角语言模式是否正确实际用起来最常卡住的地方，不是不会配，而是改完 javascriptreact.json 忘了保存，或者以为输完 rfc 就该自动展开，结果光标停那儿干等。VSCode 的片段机制很轻量，但容错率低——一个 JSON 错误、一个 scope 写错、一个 Tab 没按，整条链就断了。