webstorm 创建 react 项目必须使用内置 vite 模板，手动运行 create-react-app 或 npm init 易导致类型识别失败、hmr 失效、eslint 不生效；需勾选 typescript/react router 以自动生成 tsconfig.json 和 vite.config.ts，并确保三者（package.json、vite.config.ts、tsconfig.json）齐全才能激活 react 语言服务。
WebStorm 创建 React 项目必须用内置 Vite 模板，手动跑 create-react-app 或自己 npm init 再装依赖，十有八九会卡在类型识别、HMR、ESLint 这三关——不是代码写错了，是 WebStorm 根本没把项目“认全”。
新建项目时选错模板导致 JSX 不识别
现象：import React from 'react' 报红，Cannot resolve symbol React，但 node_modules/react 和 @types/react 明明存在。本质是 WebStorm 没触发 JSX 语言服务。
- 点 New Project → 左侧选 React → 右侧模板必须是 Vite（不是 Empty、npm init 或 create-react-app）
- 勾选
Add TypeScript：自动生成含"jsx": "react-jsx"的tsconfig.json，否则.tsx文件里 JSX 补全和校验全失效 - 勾选
Add React Router：自动加@types/react-router-dom和路由相关 Live Templates - 创建后立刻检查右下角状态栏：语言模式应为
TypeScript或JavaScript，不是Plain Text
vite.config.ts 配置错误让 HMR 失效
现象：按 Ctrl+S 没反应，浏览器没刷新，终端显示 Running 'dev' 但没绿色圆点，Console 里搜不到 [vite] hot updated。
-
vite.config.ts中删掉硬编码的server.host: '127.0.0.1'—— 这会让 WebStorm 内置终端访问不到开发服务器 - 保留
server.host: true或直接不写这一项 - 确认
package.json的dev脚本对应的是vite，不是react-scripts start - 如果刚装完依赖，立刻执行
File → Invalidate Caches and Restart → Invalidate and Restart，否则 HMR 元数据仍缓存在旧索引里
ESLint / Prettier 不标错也不格式化
现象：装了 eslint、prettier 包，也写了 .eslintrc.cjs 和 .prettierrc，但波浪线不出现，Ctrl+Alt+L 也不生效。
- Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint：勾选
Automatic configuration，且Node interpreter和ESLint package必须指向项目根目录下的node_modules/eslint - Prettier 同理：Settings → Editor → Code Style → JavaScript → Prettier，
Prettier package也要选项目内的node_modules/prettier - 确保项目根目录存在
package.json，且含"type": "module"或已配好exports字段，否则 WebStorm 读不到配置文件 - Live Templates 里
rfc不触发？进 Settings → Editor → Live Templates → React，同时勾选JavaScript和TypeScript两个适用范围
最容易被忽略的是：WebStorm 对 React 项目的识别完全依赖 package.json 结构 + vite.config.ts + tsconfig.json 三者协同。少一个，它就只当普通 JS 项目处理，JSX 支持、组件跳转、类型提示全掉线——不是插件没开，是它压根没启动那套 React 语言服务引擎。
