如何使用 Husky 和 GitHub Actions 设置 CI/CD 流水线
内容提要
本教程将指导您在Next.js应用程序中使用Husky和GitHub Actions设置CI/CD流水线，加快开发速度、增强协作、提高代码质量、早期发现问题和提高生产力。步骤包括设置应用程序、Git钩子、GitHub Actions工作流和部署项目。
延伸解读
本地钩子与远程工作流的分工
文章将 Husky 管理的 Git 钩子与 GitHub Actions 工作流结合，形成两层检查。Husky 在提交前运行测试和 lint，能快速拦截问题，避免无效提交触发远程流水线；GitHub Actions 则在推送或 PR 时执行完整构建、测试和覆盖率报告。这种分工既节省 CI 资源，又保证代码库整体质量。
lint-staged 对大型项目的效率提升
文章特别提到 lint-staged 工具，它只对暂存区文件运行 lint 和自动修复，而非整个项目。对于文件数量多的大型项目，这能显著减少每次提交前的等待时间。配置后，pre-commit 钩子会替换为运行 lint-staged，并自动修复可修复的 ESLint 问题，提升开发体验。
PR 覆盖率报告与权限配置
第二个工作流在 PR 创建时运行，并利用社区 action 将 Vitest 覆盖率结果以评论形式发布到 PR。文章强调需在 workflow 中设置 permissions 为 contents: read 和 pull-requests: write，否则无法创建评论。同时，Vitest 配置需添加 json-summary reporter，才能生成 action 所需的覆盖率摘要文件。
Vercel 自动部署与预览环境
最后一步将项目部署到 Vercel，并连接 Git 仓库实现自动部署：每次推送到主分支都会触发重新部署。Vercel 还提供 Preview Deployments，为每个 PR 生成预览 URL，方便在合并前测试新功能。这完成了 CD 部分，使通过检查的代码自动发布到生产环境。
Q&A
CI/CD的主要好处是什么？
CI/CD可以加快开发速度、增强协作、提高代码质量、早期发现问题和提高生产力。
如何在Next.js应用中设置CI/CD流水线？
首先创建Next.js应用并推送到GitHub，然后使用Husky设置Git钩子，最后创建GitHub Actions工作流以自动化构建、测试和部署。
Husky在CI/CD流水线中有什么作用？
Husky用于设置Git钩子，可以在提交代码前执行代码质量检查，确保代码符合标准。
GitHub Actions如何帮助自动化工作流？
GitHub Actions通过定义YAML文件中的工作流，自动执行构建、测试和部署等任务，确保代码集成顺利。
如何使用lint-staged提高Git钩子的效率？
lint-staged只对已暂存的文件运行Git钩子，从而避免对整个项目进行不必要的检查，提高效率。
如何在GitHub上创建工作流以运行代码覆盖率报告？
创建一个新的YAML文件，设置触发条件为pull_request，并定义工作流步骤以安装依赖、构建代码和运行测试及覆盖率。
