PhpStorm需手动启用React支持：先将.jsx/.tsx文件绑定为React JSX类型，再设JavaScript language version为React JSX，并禁用Invalid HTML attribute检查；若用TypeScript，还需确认tsconfig.json中jsx配置正确且已下载@types/react。
PhpStorm 默认不原生支持 JSX 语法高亮和智能补全，必须手动启用 React 支持并配置语言级别，否则 className、{} 插值、Fragment（）等都会报红或无提示。
如何在PhpStorm中正确启用JSX支持
关键不是装插件，而是激活内置的 React 语言支持并匹配项目实际使用的 React 版本。
- 打开 Settings / Preferences → Languages & Frameworks → JavaScript → Libraries，点击
+ Add，选择React并勾选Download from npm（自动拉取类型定义） - 确保 JavaScript language version 设为
React JSX（不是ES6或ES2022），这是 JSX 解析开关 - 若项目用 TypeScript，还需在
tsconfig.json中确认"jsx": "react-jsx"或"react"，PhpStorm 会读取该配置决定是否启用 JSX 转译检查 - 重启 PhpStorm 或点击
File → Reload project from disk，否则更改不生效
为什么 className 仍被标黄或提示“Unknown HTML attribute”
这是 PhpStorm 把 JSX 当作纯 HTML 解析了，没走 React 的语义校验流程。
React Router Code Review
下载
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。
- 检查当前文件后缀是否为
.jsx或.tsx；如果是.js，PhpStorm 默认按普通 JS 处理，需右下角点击文件类型，手动设为React JSX - 确认 Settings → Editor → Inspections → JavaScript → Invalid HTML attribute 已禁用——这个检查对 JSX 无效，反而干扰
- 若用了自定义组件（如
<button variant="primary"></button>），需为该组件写 JSDoc 类型注释或添加@types/xxx，否则属性名不会被识别
调试 React 组件时断点不触发或变量显示为 undefined
PhpStorm 的 JS 调试器默认不处理 Babel 编译后的代码映射，源码断点和实际执行位置错位。
立即学习“PHP免费学习笔记（深入）”；
- 启动开发服务器时，确保使用带 sourcemap 的模式：例如
npm start（create-react-app 默认开启），或自定义 Webpack 配置中devtool: 'source-map' - 在 PhpStorm 中配好 Run → Edit Configurations → JavaScript Debug，URL 填本地
http://localhost:3000，并勾选Enable JavaScript debugging - 断点必须打在原始 JSX 文件（如
src/components/HelloWorld.jsx）上，不能打在浏览器 Sources 面板里已编译的main.chunk.js上 - 若用
console.log查看 props，注意函数组件中 props 是第一个参数，不是this.props——类组件才用后者
最常被忽略的是文件类型绑定和 sourcemap 同步：哪怕所有配置都对，只要文件被识别成 Plain Text 或断点打在编译后代码上，调试就必然失效。
