推荐使用vite快速搭建react项目：手动创建src目录结构，配置typescript、eslint+prettier规范，并通过vite.config.ts设置@别名实现绝对路径导入，最后运行npm run dev启动。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
快速搭建一个结构清晰、开箱即用的React项目代码生成模板，避免每次从零配置Webpack、Babel、ESLint和目录规范。
初始化基础项目结构
在终端中执行 npm init -y 创建 package.json，然后手动创建 src 目录及以下子目录：components、pages、hooks、utils、assets、types。
这一步必须手建——脚手架自动生成的结构往往嵌套过深或命名不统一，后续团队协作时路径引用容易出错。
在 src 下新建 index.tsx 和 App.tsx，前者仅负责 ReactDOM.createRoot 渲染，后者作为根组件占位。
配置 TypeScript 类型支持
运行 npm install --save-dev typescript @types/react @types/react-dom。
执行 npx tsc --init 生成 tsconfig.json，然后将 "jsx": "react-jsx" 和 "strict": true 设为必选项；【若漏掉 "jsx" 配置，JSX 语法将直接报错无法编译】。
在 tsconfig.json 中补充 "baseUrl": "src" 和 "paths": { "@/*": ["*"] }，为后续绝对路径导入铺路。
集成 ESLint + Prettier 规范检查
方法一：一键安装核心依赖
运行 npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser。
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
方法二：写入 .eslintrc.cjs 配置文件
导出对象，设置 parser: '@typescript-eslint/parser'，extends 包含 plugin:react/recommended、plugin:react-hooks/recommended、prettier；【注意 extends 数组顺序不能颠倒，prettier 必须放在最后覆盖其他规则】。
创建 .prettierrc 文件，写入 {"semi": false,"singleQuote": true,"tabWidth": 2} 即可，无需额外插件桥接。
添加 Vite 构建与开发服务
第一步：卸载旧有 webpack 相关依赖（如有），避免端口冲突或 HMR 失效。
第二步：执行 npm create vite@latest my-react-app -- --template react，选择 TypeScript 版本。
第三步：将刚建好的 src 目录、tsconfig.json、.eslintrc.cjs、.prettierrc 全部复制进新生成的 my-react-app 目录，覆盖默认文件。
第四步：修改新项目中的 vite.config.ts，加入 resolve: { alias: { '@': path.resolve(__dirname, 'src') } }，使 import Button from '@/components/Button' 可直接生效。
最后运行 npm install && npm run dev，访问 http://localhost:5173 确认页面空白但控制台无报错。
