ESLint+Prettier+husky+commitlint+Danger 组成的提交前代码质量门禁流水线

方案简介

这是 entria-fullstack 仓库中与业务框架并列的另一条真实配方：一套由 ESLint、Prettier、husky、lint-staged、pre-commit、commitlint、Danger 和 Jest 组成的代码质量门禁体系。依赖清单是这套组合最直接的证据：eslint ^7.11.0、eslint-config-airbnb ^18.2.0、prettier ^2.1.2、husky ^4.3.0、lint-staged ^10.4.2、pre-commit ^1.2.2、@commitlint/cli ^11.0.0、@commitlint/config-conventional ^11.0.0、danger ^10.5.0、jest ^26.5.3、jest-runner-eslint ^0.10.0。

在一个包含 server、web、app 多包、多人协作的开源 Playground 中，仅靠人工 Code Review 难以保证风格与质量一致。这套组合在两个关卡自动把关：本地 git 提交时由 husky/pre-commit 触发 lint-staged 与 commitlint，对暂存文件做 lint、格式化与提交信息规范校验；PR/CI 阶段由 Danger 执行仓库级检查，Jest 配合 jest-runner-eslint 让测试与 lint 在同一进程跑完。

适合采用 Monorepo、多人协作、希望把规范前移到提交环节的团队参考。它是上述全栈方案能在长期演进中保持一致性的基础设施。

亮点与能力

• ESLint 基于 Airbnb 规则集（eslint-config-airbnb ^18.2.0），并叠加 eslint-config-okonet、eslint-config-shellscape 等多个配置
• TypeScript 感知 lint：eslint-import-resolver-typescript ^2.3.0、typescript-eslint-parser
• 专门的 Relay 插件 eslint-plugin-relay ^1.8.1 校验 Relay 查询写法
• 可访问性与 React 规则：eslint-plugin-jsx-a11y ^6.3.1、eslint-plugin-react ^7.21.4
• Cypress 用法约束：eslint-plugin-cypress ^2.11.2
• 提交信息遵循 Conventional Commits（@commitlint/config-conventional ^11.0.0）
• jest-runner-eslint ^0.10.0 让 ESLint 检查纳入 Jest 运行体系
• Danger ^10.5.0 支持在代码审查阶段自动执行自定义检查

组成与分工

• ESLint：静态代码检查核心，airbnb 规则集提供严格基线
• Prettier：统一代码格式化，消除风格争议
• husky：注册 git hooks，把检查挂到提交流程
• pre-commit：另一层 pre-commit 钩子管理
• lint-staged：只对暂存文件运行 lint 与格式化，保证速度
• commitlint：校验提交信息符合 Conventional 规范
• Danger：PR/审查阶段的自动化检查
• Jest + jest-runner-eslint：测试与 lint 统一执行入口
• flow-bin：Flow 类型检查（^0.136.0），与 TypeScript 并存

使用与配置要点

• 该配方随仓库根 yarn install 一起安装，无需额外命令；提交代码时钩子自动触发
• 提交信息需符合 Conventional Commits 规范，否则被 @commitlint/cli 拒绝
• 运行测试即运行 lint：jest ^26.5.3 配合 jest-runner-eslint ^0.10.0，一次命令覆盖测试与代码检查
• lint-staged ^10.4.2 + prettier ^2.1.2 保证入库文件均已格式化，review 时不会被风格 diff 干扰

注意事项与常见问题

• 该项目同时引入 flow-bin ^0.136.0 与 typescript ^4.0.3 / typescript-eslint-parser，说明仓库处于 Flow 向 TypeScript 过渡阶段，两类类型检查并存
• 存在 husky ^4.3.0 与 pre-commit ^1.2.2 两套钩子管理工具同时声明，配置时需注意避免钩子重复注册
• Danger 需要在 PR/CI 环境中运行才能发挥作用，本地无效

优缺点

• ✓ 提交前自动拦截不规范代码
• ✓ PR 级别持续检查覆盖
• ✕ 提交钩子可能拖慢提交流程

出处

本方案挖掘自开源项目 entria/entria-fullstack，方案内容与实施命令均来自其 README 原文。