react jsx 语法高亮不生效需先确认文件类型绑定为 react jsx，再确保 settings → editor → file types 中已为 react jsx 类型添加 .jsx 和 .tsx；同时启用 javascript and typescript、javascript debugger 插件并重启 ide。
React JSX 语法高亮不生效？先确认文件类型绑定
PhpStorm 默认不会把 .jsx 或 .tsx 文件自动识别为 React，而是当成普通文本或 JavaScript。右下角状态栏如果显示的是 Text 或 JavaScript，高亮和补全基本就废了一半。
解决方法很简单：
- 打开任意一个
.jsx文件，点击右下角语言标识（比如 “JavaScript”） - 选择
React JSX（不是 “JavaScript React” 或 “TypeScript JSX”，那是旧版命名） - 更彻底的做法：进入
Settings → Editor → File Types，在React JSX类型下，确保已添加*.jsx和*.tsx（如果用 TS）
这步漏掉，后续所有配置都白搭——连 useState 都不会变蓝，className 也不会有属性提示。
JSX 补全失效？检查 JavaScript 和 TypeScript 插件是否启用
React 支持不是默认“开箱即用”的独立功能，它依赖两个核心插件：JavaScript and TypeScript 和 JavaScript Debugger。这两个插件在 PhpStorm 中是捆绑的，但可能被手动禁用。
验证与启用方式：
- 进入
Settings → Plugins - 在
Installed标签页搜索JavaScript and TypeScript，确认状态是Enabled - 同样检查
JavaScript Debugger是否启用（缺它会导致断点、props 提示等异常） - 如果刚启用，重启 PhpStorm 才会生效
常见错误现象：输入 use 后没任何提示，或者 <div classname="</code"> 按 <code>Ctrl+Space 不弹出属性建议——大概率就是插件没开。
React Hook 和组件属性没提示？得配好 JS/TS 语言服务
PhpStorm 的 React 补全质量，高度依赖项目中是否启用有效的 JavaScript 或 TypeScript 语言服务。它不是靠猜，而是读 node_modules 里的类型定义（比如 @types/react）。
关键操作：
- 确保项目根目录下有
package.json，且已安装react和@types/react（TS 项目还必须有@types/react-dom） - 进入
Settings → Languages & Frameworks → JavaScript，检查JavaScript language version设为ECMAScript 6+或更高 - 如果是 TypeScript 项目，确认
Settings → Languages & Frameworks → TypeScript中的Node interpreter和TypeScript package路径正确（指向node_modules/typescript）
没装 @types/react，useState 可能只提示函数名，但参数类型、返回值、泛型支持全无；props 的解构提示也会消失。
自定义组件不提示？别忘了开启 “Auto import” 和索引等待
你写了个 Button.jsx，但在其他文件里输入 <but> 却不弹出补全——这不是 bug，是 PhpStorm 还没完成符号索引，或没识别导入路径。</but>
实操要点：
- 首次打开 React 项目后，底部状态栏会显示 “Indexing…”；等它结束（通常几十秒到几分钟），自定义组件才开始被识别
- 确保
Settings → Editor → General → Auto Import中勾选了Add unambiguous imports on the fly和Optimize imports on the fly - 如果组件在
src/components/下，但补全仍不出现，尝试右键项目根目录 →Reload project from disk - 极端情况可手动触发索引重建：
File → Invalidate Caches and Restart → Invalidate and Restart
最常被忽略的一点：自定义组件名必须是 PascalCase（如 MyModal），小写开头（myModal）会被 PhpStorm 当作普通变量处理，不进组件补全列表。
