React + Ts + Vite加入工程化
已加入的工程化能力类别内容作用代码格式Prettier format/format:check统一代码风格代码质量ESLint eslint-config-prettier避免 ESLint 与 Prettier 冲突单元测试Vitest Testing Librarysrc/api/kanban.test.ts示例Git 钩子Husky lint-stagedcommit 前自动 format lint环境变量.env.example文档化配置项编辑器.editorconfig统一缩进、换行PR 规范.github/pull_request_template.mdPR 自检清单CI/CD 增强CI / Deploy 增加format:check、test合并前多一道门禁新增 npm scriptspnpm format # 格式化全部代码pnpm format:check # 检查格式CI 用pnpm typecheck # 仅类型检查pnpm test # 跑单元测试pnpm test:watch # 监听模式pnpm test:coverage # 覆盖率报告本地启用 Git 钩子push 后其他人 clone 下来执行pnpm install # 自动跑 husky prepare注册 pre-commit之后每次git commit会自动对暂存文件执行 Prettier ESLint。当前工程化架构后续可继续加强按需E2E 测试Playwright 测拖拽、创建任务Commit 规范commitlint conventional commitsAPI 校验用 Zod 校验请求/响应项目里已有 zod错误监控Sentry 接入线上Branch Protectionmain必须 CI 通过才能合并Dependabot自动更新依赖一、都增加或修改了什么1. 代码质量与格式文件/配置改动prettier.prettierrc/.prettierignore统一代码格式eslint.config.js接入eslint-config-prettier避免与 Prettier 规则冲突全项目源码跑过一次pnpm format统一风格2. 测试文件改动vitestvite.config.ts的test配置单元测试框架src/test/setup.ts测试环境初始化src/api/kanban.test.tsAPI 层示例测试2 个用例3. Git 工作流文件改动husky.husky/pre-commitcommit 前自动检查lint-stagedpackage.json只检查暂存文件加快速度prepare: huskypnpm install时自动注册钩子4. 规范与文档文件改动.editorconfig编辑器缩进、换行一致.env.example环境变量说明.github/pull_request_template.mdPR 描述模板.gitignore忽略coverage、.env等5. 包管理规范文件改动package.jsonpackageManager、engines.node 20新增 scriptstypecheck、format、test、test:coverage等6. CI/CD工程化的一部分之前已有文件作用.github/workflows/ci.ymlPR/push 时format → lint → test → build.github/workflows/deploy.yml合并 main 后部署 GitHub PagesCI 在工程化阶段的新增项format:check、test原先只有 lint build。二、为什么需要工程化你这个看板项目已经具备前端 后端 API拖拽、持久化CI/CD 自动部署继续单人开发还勉强够用但会遇到场景没有工程化时改完 push可能线上 build 失败才发现两人协作缩进、引号、风格不一致diff 噪音大重构 API不知道有没有改坏只能手动点页面新人加入不知道用什么 Node、怎么配环境合 PR缺少统一检查容易合入有问题的代码工程化的目标把「靠人记、靠手测」变成「工具自动兜底」。三、解决了什么问题工程化前工程化后手动测pushCI 可能失败线上出问题pre-commit 本地拦截pushCI 全量检查通过才合并/部署问题怎么解决格式不统一Prettier format:check低级代码错误ESLint核心逻辑被改坏Vitest目前覆盖 API 层坏代码进仓库Husky pre-commit坏代码进 mainCI 门禁环境不一致.env.example、engines、packageManagerPR 信息缺失PR 模板部署前未验证Deploy workflow 同样跑 test/lint四、引入了新问题吗有主要是成本和复杂度属于正常 trade-off新问题说明应对commit 变慢pre-commit 要跑 format lintlint-staged 只检查暂存文件紧急时可--no-verify尽量少用CI 更严格format/test 失败会拦合并本地先跑pnpm format:check pnpm testPrettier 大 diff首次 format 改了很多文件已做过一次之后 diff 会小很多测试覆盖不足只有 API 2 个用例拖拽/UI 未测后续补组件测试、E2EPlaywrightHusky 需初始化新 clone 要pnpm install才注册钩子写在 README 或 onboarding 里维护成本多一套依赖要升级可用 Dependabot 自动提 PR规则可能过严例如 shadcn 组件 ESLint 例外已在eslint.config.js里单独处理没有解决、也不在本轮工程化范围内的线上 API 仍要单独部署Render 等GitHub Pages 不能跑 NodeE2E、性能监控、错误上报Sentry尚未接入commit message 规范commitlint未加五、一句话总结维度内容改了什么格式、测试、Git 钩子、环境文档、CI 增强为什么从「个人 demo」升级到「可协作、可持续交付」解决什么风格乱、低级错误、坏代码上线、环境不一致新代价流程更严、学习成本略增、测试覆盖还需继续补当前阶段是轻量工程化适合个人项目和小团队协作。若团队变大可再补 E2E、commitlint、Branch Protection、Sentry 等。