webstorm新建react项目应直接选用内置vite或next.js模板，避免手动npm create-react-app；若遇“cannot resolve symbol react”等问题，需检查类型定义、jsx配置并清除缓存重启索引。
WebStorm 里新建 React 项目不用手动 npm create react-app
WebStorm 自带项目模板，create-react-app 已被官方弃用，直接选 Vite 或 Next.js 模板更稳妥。点 “New Project” → 左侧选 “React”，右侧模板默认是 Vite + React（TypeScript/JavaScript 可选），点“Create”就行。
常见错误现象：npx create-react-app my-app 成功但 WebStorm 打开后没识别出 React 支持、ESLint 不生效、热更新失效——本质是项目结构和 WebStorm 的语言服务没对齐。
- 务必勾选 “Add React Router” 或 “Add TypeScript” 等选项，WebStorm 会自动配好相关插件和配置文件
- 不要在终端里手动
npm init再选模板，WebStorm 的向导会自动写vite.config.ts和tsconfig.json，手动建容易漏@vitejs/plugin-react - 如果已存在项目，右键根目录 → “Load project configuration” 才能激活 React 语法高亮和组件跳转
为什么 WebStorm 提示 “Cannot resolve symbol React”
不是代码错，是 WebStorm 没找到 @types/react 类型定义，或没识别到 JSX 配置。尤其出现在你用 npm install 手动装了依赖但没重启索引时。
- 检查
node_modules/@types/react是否真实存在；不存在就运行npm install --save-dev @types/react @types/react-dom - 打开
Settings → Languages & Frameworks → JavaScript → Libraries，确认 “React JSX” 解析模式设为Automatic或React - 清空 WebStorm 缓存：菜单栏
File → Invalidate Caches and Restart → Invalidate and Restart，否则类型提示可能卡在旧版本
热更新（HMR）不生效？检查 vite.config.ts 和启动方式
WebStorm 默认用 npm run dev 启动，但如果你改过 package.json 的 script，或用了自定义端口，HMR 就会断连。Vite 的 HMR 依赖正确的 server.host 和 server.port 配置。
- 确保
vite.config.ts里没有硬编码server.host: '127.0.0.1'——这会让 WebStorm 内置终端访问不到 - 启动命令必须是
npm run dev（对应vite），不是npm start（老 create-react-app 用的） - WebStorm 底部状态栏要显示 “Running ‘dev’” 且有绿色圆点，如果只是灰色文字，说明没真正跑起来，点右侧“Play”图标重试
ESLint / Prettier 不工作？别只装包，要配 WebStorm 插件链
装了 eslint 和 prettier 包，但格式化快捷键没反应、波浪线不标错——问题在 WebStorm 没把它们和项目绑定。它不读 .eslintrc.cjs 的自动配置，得手动指定解析器路径。
- 进
Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint，把 “ESLint package” 设为node_modules/eslint（不是全局路径） - 勾选 “Run eslint —fix on save”，否则保存不自动修
- Prettier 要单独配：同级菜单进 “Prettier”，把 “Prettier package” 指向
node_modules/prettier，并取消勾选 “Run for files” 下的.ts（留给 ESLint 处理）
