vite比create-react-app更适合现在起步，因其启动极快、hmr精准、原生支持ts/jsx且配置开放；cra则锁死webpack配置，自定义需绕路，而react官方文档自2026年3月起已推荐vite。
直接用 npm create vite@latest 初始化，别碰 npm init 或手配 Webpack —— 后者八成会卡在 HMR 失效、JSX 不识别、路径跳转失败这三件事上。
为什么 Vite 比 create-react-app 更适合现在起步
Vite 启动快、HMR 精准、原生支持 TypeScript 和 JSX，且不封死配置。create-react-app 虽然省心，但它的 react-scripts 把 Webpack 配置全锁死了：想加 alias、proxy、alias 别名或自定义 loader，只能靠 craco 或 rescripts 绕路，反而更易出错。而 Vite 的 vite.config.ts 是明文可读可改的，哪怕只加一行 resolve.alias，也只需写两行代码。
常见误判点：
- 以为“Vite 新”就“不稳定”——其实 React 官方文档已将 Vite 列为推荐脚手架（2026 年 3 月起）
- 看到
create-vite命令就去 npm install 全局包——没必要，npm create vite@latest是 npx 的现代写法，自动调用最新版 - 选框架时犹豫要不要勾 “React Compiler”——它还在 alpha 阶段，
useMemo/useCallback行为有差异，新手慎用
初始化命令与关键选项实操
在终端执行：
npm create vite@latest my-react-app -- --template react
注意结尾的双横线 -- 和空格，这是 npm 传参语法，漏了会导致模板识别失败。之后交互式选择：
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
- 项目名：随便填，比如
my-react-app - 框架：选
React - 语言：选
TypeScript（不是TypeScript + SWC，那个是旧版残留项） - 是否启用 ESLint：选
Yes（它会自动生成.eslintrc.js并装好eslint-plugin-react和eslint-plugin-react-hooks）
完成后进目录、安装依赖、启动：
cd my-react-app<br>npm install<br>npm run dev
浏览器打开 http://localhost:5173 即可。别手动改端口——Vite 默认用 5173，和 create-react-app 的 3000 不冲突，也避免本地已有服务占位。
VSCode 必配三项：让 JSX 和跳转真正可用
新建项目后，在 VSCode 中打开文件夹（不是单个文件），立刻做这三件事，否则 import 跳转失效、JSX 报红、类型提示不工作：
- 在项目根目录新建
jsconfig.json（JS 项目）或确认tsconfig.json存在（TS 项目），并确保含：{<br> "compilerOptions": {<br> "baseUrl": "src",<br> "paths": {<br> "@/*": ["*"]<br> }<br> }<br>}注意："@/*": ["*"]不是["src/*"]，后者会让路径解析多套一层，Ctrl+Click 依然打不开 - VSCode 设置中搜索
javascript.validate.enable，把它设为false——否则 JS 文件会被 TS 语言服务误判，JSX 标签报错 - 确保已装 ESLint 插件，并在设置里打开：
eslint.validate→ 勾选javascriptreact和typescriptreact；editor.defaultFormatter→ 设为esbenp.prettier-vscode
容易被忽略的调试与热更新细节
Vite 的 HMR 在某些场景下会静默失败，现象是改了组件没刷新、console.log 不输出、断点不命中。这不是插件问题，而是环境配置偏差：
- 关掉所有其他占用 5173 端口的服务（尤其是 WSL2 下的遗留 node 进程，用
lsof -i :5173或netstat -ano | findstr :5173查） - VSCode 的
Auto Save模式别设成afterDelay，改成onFocusChange或off，否则保存延迟导致 HMR 捕获不到变更 - 调试时不要直接跑
node --inspect，Vite 自带 Chrome DevTools 支持：启动npm run dev后，在 VSCode 中按Ctrl+Shift+P→ 输入Debug: Open Configuration→ 选Chrome，再把url改成http://localhost:5173即可断点调试
最常被跳过的其实是 jsconfig.json 的 baseUrl 配置和 javascript.validate.enable 关闭这两步——它们不报错，但会让整个开发体验降级成“能跑，但总差点意思”。
