webstorm 创建 react 项目应直接选用内置 vite + react 模板，避免手动使用已弃用的 create-react-app；需勾选 typescript 或 react router 等选项以自动配置类型定义和插件，确保 settings 中 jsx 解析模式设为 automatic、eslint/prettier 绑定至项目 node_modules 并存在配置文件，否则将出现类型识别失败、hmr 失效或代码检查不生效等问题。
WebStorm 创建 React 项目现在默认走 Vite 路线，create-react-app 已被官方弃用，手动配 webpack 或硬套旧模板容易卡在类型识别、HMR、ESLint 这几关——问题不在代码，而在 WebStorm 没把项目“认全”。
新建项目时直接选 Vite + React 模板
点 “New Project” → 左侧选 React → 右侧模板默认就是 Vite（支持 TypeScript/JavaScript 切换），别手抖切回 “Empty” 或 “npm init”。这个向导会自动生成 vite.config.ts、tsconfig.json（如果选了 TS）、以及关键的 @vitejs/plugin-react 插件配置。手动跑 npx create-react-app 再导入，WebStorm 很可能不加载 JSX 支持，连 React 都标红。
勾选 “Add TypeScript” 或 “Add React Router” 是有用的：WebStorm 会据此自动写 tsconfig.json 的 jsx 字段、加 react-router 类型定义、甚至配好路由相关 Live Templates。
“Cannot resolve symbol React” 不是少装包，是没对齐语言服务
现象：import React from 'react' 报错，但 node_modules/react 和 @types/react 明明存在。本质是 WebStorm 的 JavaScript 语言服务没触发 JSX 解析模式。
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
- 检查
Settings → Languages & Frameworks → JavaScript → Libraries，确认node_modules/react和node_modules/@types/react已出现在列表里；没出现就点右上角Reload - 确保
Settings → Languages & Frameworks → JavaScript → React JSX设为Automatic或React（不是Preserve） - 如果刚装完依赖，立刻重启索引：菜单栏
File → Invalidate Caches and Restart → Invalidate and Restart，否则类型提示会卡在旧快照
HMR 失效或浏览器不自动打开？先看启动方式和配置
WebStorm 底部状态栏显示 “Running ‘dev’” 但没绿色圆点，说明只是命令发出去了，Vite 实际没起来——常见于端口冲突或 host 配置锁死。
- 确认
package.json里的devscript 对应的是vite，不是react-scripts start；WebStorm 默认执行的就是npm run dev - 检查
vite.config.ts：删掉server.host: '127.0.0.1'这类硬编码，保留server.host: true或干脆不写，否则 WebStorm 内置终端访问不到 - 浏览器不弹？进
Run → Edit Configurations，找到你的 NPM 配置，勾选Run npm script in new terminal—— 否则输出被截断，Vite 的 open-browser 逻辑根本收不到信号
ESLint / Prettier 没反应？光装包不够，得绑定到项目级工具链
装了 eslint、prettier、@typescript-eslint/eslint-plugin，但格式化快捷键无效、错误不标红——说明 WebStorm 没把它们和当前项目关联上。
- 进
Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint，把ESLint package路径设为node_modules/eslint（不是全局路径），并勾选Automatic configuration - 同理，
Prettier设置里指定Prettier package为node_modules/prettier，并确保Run for files匹配*.tsx; *.ts; *.jsx; *.js - 关键一步：在项目根目录下必须有
.eslintrc.cjs或eslint.config.js（Vite 官方推荐后者），空配置也行，但不能没有；否则 WebStorm 认为“项目没启用 ESLint”
最常被忽略的其实是文件后缀和语言模式的匹配：.jsx 文件右下角状态栏必须显示 “JavaScript”，不是 “Plain Text”；.tsx 文件要同时在 Live Templates 里勾选 JavaScript 和 TypeScript 两个作用域，否则 rfc 模板压根不响应。
