React补全失效主因是语言模式未设为React-jsx,需手动切换并确保files.associations、editor.quickSuggestions.strings、editor.tabCompletion等配置正确,同时排查插件冲突与TypeScript Server加载失败。

React补全失效,先看右下角语言模式是不是 React-jsx
VSCode 对 JSX 的补全逻辑只在 React-jsx 语言模式下激活,不是 JavaScript React,也不是 TypeScript React——哪怕文件后缀是 .tsx,右下角显示错一个字符,补全就完全不触发。
常见错误现象:div 按 Tab 只出 <div>,没有闭合标签;input 不自动变成 <input />;组件名敲一半没提示。
- 点击右下角语言标识(比如显示
JavaScript React),输入React-jsx并回车确认 - 如果项目用
.page.tsx这类非标后缀,需在settings.json中加:"files.associations": {"*.page.tsx": "react-jsx"} - 别信文件后缀自动识别——
utils.jsx被当成Plain Text很常见,未保存的临时文件默认就是Plain Text
更新插件后补全时有时无,大概率是多个语言服务冲突
VSCode 不会仲裁谁该提供补全,它只把请求广播出去,然后拼接所有响应。一旦 Pylance、ESLint、Tailwind CSS IntelliSense 同时监听字符串或 JSX 属性,结果就是提示延迟、重复、或干脆空白。
- 禁用所有插件(命令面板 →
Extensions: Disable All Installed Extensions),重启后测试补全是否恢复 - 重点排查组合:
Python扩展 +Pylance(Pylance 已含 Jedi,双开必冲突)、ESLint+Prettier(保存时抢格式化权,间接干扰补全时机) - React 项目中慎用
Auto Close Tag:它按 HTML 规则补全,会在<img />后多加一个</img>,导致 JSX 解析失败,进而让语言服务器退回到降级模式
editor.quickSuggestions.strings 和 editor.tabCompletion 必须手动打开
这两个设置默认关闭字符串内补全和 Tab 确认补全,更新插件后它们常被重置为 false 或 off,尤其在 workspace 配置覆盖全局设置时。
- 搜
editor.quickSuggestions,展开后确保strings项为true(Tailwind 类名、className值、data-*属性都依赖它) - 搜
editor.tabCompletion,设为"onlySnippets"(推荐)或"on";设成"off"时 Tab 只缩进,不会插入补全项 - 检查
settings.json里是否有"editor.quickSuggestions"被 workspace 配置覆盖,例如:"[typescriptreact]": {"editor.quickSuggestions": {"strings": false}}就会关掉 React 文件的字符串提示
更新后补全空白?查 TypeScript Server 日志有没有 Failed to load project
React 项目严重依赖 tsserver 做类型推导和 JSX 补全。插件更新后若 tsconfig.json 路径错、node_modules 没装、或 compilerOptions.jsx 没设为 preserve,tsserver 就静默加载失败,UI 上毫无提示。
- 命令面板运行
Developer: Restart Language Server,强制重载 tsserver - 在
settings.json加:"typescript.tsserver.log": "verbose",然后看「输出」面板 → 「TypeScript Server Log」 - 关键线索:
Failed to load project(路径错)、ENOENT: no such file(工作区根目录识别错误)、Cannot read property 'map' of undefined(插件版本与 TS 版本不兼容) - Windows 用户可任务管理器杀掉残留
node.exe;macOS/Linux 执行pkill -f tsserver清理卡死进程
React 补全失效最麻烦的点不在插件本身,而在语言服务启动链路上的某个环节被悄悄跳过——比如 tsconfig.json 里漏了 "jsx": "preserve",或者 tailwind.config.js 里 content 字段没写扩展名,这些配置错误不会报红,但会让整个补全索引为空。


















