React + Ts + Vite加入工程化

代码格式

Prettier +format/format:check

统一代码风格

代码质量

ESLint + eslint-config-prettier

避免 ESLint 与 Prettier 冲突

单元测试

Vitest + Testing Library

src/api/kanban.test.ts示例

Git 钩子

Husky + lint-staged

commit 前自动 format + lint

环境变量

.env.example

文档化配置项

编辑器

.editorconfig

统一缩进、换行

PR 规范

.github/pull_request_template.md

PR 自检清单

CI/CD 增强

CI / Deploy 增加format:check、test

合并前多一道门禁

prettier+.prettierrc/.prettierignore

统一代码格式

eslint.config.js

接入eslint-config-prettier，避免与 Prettier 规则冲突

全项目源码

跑过一次pnpm format统一风格

vitest+vite.config.ts的test配置

单元测试框架

src/test/setup.ts

测试环境初始化

src/api/kanban.test.ts

API 层示例测试（2 个用例）

husky+.husky/pre-commit

commit 前自动检查

lint-staged（package.json）

只检查暂存文件，加快速度

prepare: husky

pnpm install时自动注册钩子

.editorconfig

编辑器缩进、换行一致

.env.example

环境变量说明

.github/pull_request_template.md

PR 描述模板

.gitignore

忽略coverage、.env等

package.json

packageManager、engines.node >= 20

新增 scripts

typecheck、format、test、test:coverage等

.github/workflows/ci.yml

PR/push 时：format → lint → test → build

.github/workflows/deploy.yml

合并 main 后部署 GitHub Pages

改完 push

可能线上 build 失败才发现

两人协作

缩进、引号、风格不一致，diff 噪音大

重构 API

不知道有没有改坏，只能手动点页面

新人加入

不知道用什么 Node、怎么配环境

合 PR

缺少统一检查，容易合入有问题的代码

格式不统一

Prettier +format:check

低级代码错误

ESLint

核心逻辑被改坏

Vitest（目前覆盖 API 层）

坏代码进仓库

Husky pre-commit

坏代码进 main

CI 门禁

环境不一致

.env.example、engines、packageManager

PR 信息缺失

PR 模板

部署前未验证

Deploy workflow 同样跑 test/lint

commit 变慢

pre-commit 要跑 format + lint

lint-staged 只检查暂存文件；紧急时可--no-verify（尽量少用）

CI 更严格

format/test 失败会拦合并

本地先跑pnpm format:check && pnpm test

Prettier 大 diff

首次 format 改了很多文件

已做过一次；之后 diff 会小很多

测试覆盖不足

只有 API 2 个用例，拖拽/UI 未测

后续补组件测试、E2E（Playwright）

Husky 需初始化

新 clone 要pnpm install才注册钩子

写在 README 或 onboarding 里

维护成本

多一套依赖要升级

可用 Dependabot 自动提 PR

规则可能过严

例如 shadcn 组件 ESLint 例外

已在eslint.config.js里单独处理

改了什么

格式、测试、Git 钩子、环境文档、CI 增强

为什么

从「个人 demo」升级到「可协作、可持续交付」

解决什么

风格乱、低级错误、坏代码上线、环境不一致

新代价

流程更严、学习成本略增、测试覆盖还需继续补