如何配置 Git Hooks 实现代码提交前的检查？

推荐答案

配置 Git Hooks 实现代码提交前的检查

1. 创建 pre-commit 钩子文件
   在项目的 .git/hooks 目录下创建一个名为 pre-commit 的文件（如果不存在该目录，请确保 .git 目录存在）。

   touch .git/hooks/pre-commit
   chmod +x .git/hooks/pre-commit

2. 编写 pre-commit 脚本
   在 pre-commit 文件中添加以下内容，用于在提交前运行代码检查工具（如 ESLint 或 Prettier）：

   // www.javascriptcn.com code example
   #!/bin/sh
   
   # 运行 ESLint 检查
   npx eslint .
   
   # 如果 ESLint 检查失败，阻止提交
   if [ $? -ne 0 ]; then
     echo "ESLint 检查未通过，请修复错误后再提交。"
     exit 1
   fi
   
   # 运行 Prettier 格式化代码
   npx prettier --write .
   
   # 将格式化后的代码重新添加到暂存区
   git add .

3. 安装依赖
   确保项目中已安装 ESLint 和 Prettier：

   npm install eslint prettier --save-dev

4. 测试 pre-commit 钩子
   尝试提交代码，如果代码不符合规范，提交将被阻止。

本题详细解读

什么是 Git Hooks？

Git Hooks 是 Git 提供的一种机制，允许在特定的 Git 操作（如提交、推送、合并等）前后触发自定义脚本。通过配置这些钩子，可以在代码提交前自动执行代码检查、格式化、测试等操作，确保代码质量。

pre-commit 钩子的作用

pre-commit 钩子在执行 git commit 命令时触发，通常用于在提交前进行代码检查或格式化。如果钩子脚本返回非零状态码，Git 将阻止提交。

实现代码提交前检查的关键点

1. 脚本可执行权限
   确保 pre-commit 文件具有可执行权限，否则钩子不会生效。

2. 检查工具的选择
   常用的代码检查工具包括 ESLint（用于 JavaScript 代码检查）和 Prettier（用于代码格式化）。根据项目需求选择合适的工具。

3. 错误处理
   如果检查工具发现错误，脚本应返回非零状态码（如 exit 1），以阻止提交。

4. 格式化后重新暂存
   如果使用 Prettier 格式化代码，格式化后的代码需要重新添加到暂存区（git add .），否则格式化后的更改不会被提交。

扩展：使用 Husky 简化配置

手动配置 Git Hooks 可能较为繁琐，推荐使用 Husky 工具简化流程。Husky 可以自动安装 Git Hooks，并通过配置文件（如 .husky/pre-commit）管理钩子脚本。

# 安装 Husky
npm install husky --save-dev

# 初始化 Husky
npx husky install

# 添加 pre-commit 钩子
npx husky add .husky/pre-commit "npx eslint . && npx prettier --write . && git add ."

通过 Husky，可以更轻松地管理和扩展 Git Hooks。