webstorm 识别不了 jsx 文件或报“react is not defined”的根本原因是项目未被正确识别为 react 项目，需确认 package.json 含 react/react-dom、jsx 库已加载、tsconfig.json 的 jsx 字段正确配置，并检查文件类型映射与语言模式匹配。
WebStorm 识别不了 jsx 文件或报红 React is not defined
根本原因通常是 WebStorm 没把项目当 React 项目处理，或者 Babel/TypeScript 配置没生效。不是插件没装（默认已带 React 支持），而是项目级配置没对上。
- 确认
package.json中有react和react-dom依赖（哪怕只是devDependencies），否则 WebStorm 不会自动启用 JSX 语言支持 - 打开
Settings > Languages & Frameworks > JavaScript > Libraries，检查是否已加载node_modules/react和node_modules/react-dom的类型定义（WebStorm 通常自动做，但首次打开项目时可能卡住，可点右上角Reload） - 如果用了 TypeScript，确保
tsconfig.json中jsx字段设为"preserve"或"react-jsx"，否则 WebStorm 的 JSX 语法校验和自动补全会失效 - 常见错误现象：
import React from 'react'报“unresolved variable”，其实是 WebStorm 没读到react的类型声明——删掉这行再重写一次，触发自动导入，往往能唤醒类型索引
Live Templates 里写 rfc 不生成函数组件模板
WebStorm 自带的 rfc（React Function Component）模板默认只在 .js 或 .tsx 文件中生效，且要求文件后缀和语言模式匹配。不是模板丢了，是触发条件没满足。
- 检查右下角状态栏：当前文件的语言模式是不是
JavaScript或TypeScript？如果是Plain Text或HTML，模板不会响应 - 确保文件扩展名是
.js、.jsx、.ts或.tsx；.jsx文件需在Settings > Editor > File Types中被正确映射到JavaScript类型（默认已配好，但有时被手动改过） - 如果用的是
.tsx，但模板仍不生效，进Settings > Editor > Live Templates > React，勾选JavaScrip和TypeScript两个适用范围（别只勾一个） - 自定义模板时，避免在
Abbreviation里加空格或特殊字符，rfc必须纯字母，否则无法触发
运行 npm start 后浏览器没自动打开，或热更新失效
这不是 WebStorm 的 bug，而是它默认不接管 npm 脚本的终端行为。热更新本身由 webpack-dev-server 或 Vite 控制，WebStorm 只负责启动命令，不干预内部机制。
- 在
Run > Edit Configurations中新建NPM配置，Command填start，勾选Run npm script in new terminal（否则输出可能被截断，导致 HMR 初始化失败） - 如果浏览器没自动打开，检查
package.json的start脚本是否含--open（如react-scripts start --open）；没有的话，WebStorm 不会额外帮你加 - 热更新失效的典型表现：改了
.jsx文件，控制台显示Compiled successfully，但页面没变——这时先看浏览器控制台有没有Failed to load source map报错，大概率是sourceMapPathOverrides配置不匹配，不是 WebStorm 的问题 - 不要在 WebStorm 内置终端里手动敲
npm start后又去点「重新运行」按钮，这会起两个 dev server，端口冲突，第二个直接静默失败
ESLint 报错不实时显示，或 eslint-plugin-react 规则不生效
WebStorm 的 ESLint 集成依赖本地 node_modules/.bin/eslint 和项目根目录下的配置文件，路径或版本稍有偏差，整套校验就掉链子。
- 在
Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint中，ESLint package必须指向项目内的node_modules/eslint，不能选全局安装的（尤其当你用 pnpm 或 yarn 2+ 时，全局路径根本找不到插件） - 确认项目根目录有
.eslintrc.js或eslintConfig字段，且其中包含plugins: ['react']和extends: ['plugin:react/recommended']；漏掉plugin:react这一行，所有react/开头的规则都不会加载 - 如果用了 Prettier，别把
eslint-config-prettier放在extends数组最前面——它会关掉所有规则，包括react插件的，应放在最后 - 改完 ESLint 配置后，必须点设置页右上角的
Apply，再等几秒让 WebStorm 重新加载配置，否则编辑器里还是旧规则
Settings > Languages & Frameworks 里的路径映射和语言模式是否还对得上。
