Prettier项目中的Git预提交钩子实践指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00992/article/details/148324841

Prettier项目中的Git预提交钩子实践指南

prettier prettier/prettier: 是一个开源的代码格式化工具，用于提高代码可读性和一致性。它支持多种编程语言和格式化规则，可以帮助开发者快速格式化代码，提高开发效率。特点包括易于使用、自动格式化、支持多种语言和格式规则等。项目地址: https://gitcode.com/gh_mirrors/pr/prettier

前言

在现代前端开发中，代码格式化已成为保证项目一致性的重要环节。Prettier作为当前最流行的代码格式化工具，可以与Git的预提交钩子(pre-commit hook)结合使用，确保每次提交的代码都符合统一的格式标准。本文将详细介绍五种在Prettier项目中实现预提交自动格式化的方案。

预提交钩子的核心价值

预提交钩子是在执行git commit命令前自动触发的脚本，它能够：

自动格式化暂存区(staged)中的文件
确保团队所有成员提交的代码风格一致
减少代码审查中关于格式的讨论
避免因格式问题导致的CI/CD失败

方案一：lint-staged集成方案

适用场景：需要同时使用ESLint、Stylelint等其他代码质量工具，或需要支持部分暂存文件(git add --patch)的情况。

实现步骤：

确保Prettier已安装并列为开发依赖
执行安装命令：

npx mrm@2 lint-staged

技术原理：该命令会自动安装husky和lint-staged，并在项目的package.json中添加配置。husky负责Git钩子的管理，lint-staged则负责对暂存文件执行指定操作。

优势：

支持多种工具链并行处理
可配置性强
社区支持广泛

方案二：pretty-quick轻量方案

适用场景：仅需对变更文件进行整体格式化，不涉及其他代码质量检查。

安装配置（以npm为例）：

npm install --save-dev simple-git-hooks pretty-quick
echo '{\n  "pre-commit": "npx pretty-quick --staged"\n}\n' > .simple-git-hooks.json
npx simple-git-hooks

特点：

配置简单直接
专注于Prettier格式化
使用simple-git-hooks替代husky，更加轻量

方案三：Husky.Net跨平台方案

适用场景：.NET技术栈项目需要集成Prettier与其他代码质量工具。

实施流程：

dotnet new tool-manifest
dotnet tool install husky
dotnet husky install
dotnet husky add pre-commit

配置文件示例（task-runner.json）：

{
  "command": "npx",
  "args": ["prettier", "--ignore-unknown", "--write", "${staged}"],
  "pathMode": "absolute"
}

优势：

完美融入.NET生态系统
支持多种文件状态
可扩展性强

方案四：git-format-staged高级方案

适用场景：需要处理部分暂存文件的复杂场景，其他方案无法满足需求时。

技术特点：

直接操作Git对象数据库
确保已暂存变更始终被格式化
不会意外暂存未暂存的变更
自动处理冲突情况

安装示例（npm）：

npx husky init
npm install --save-dev git-format-staged
node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"

方案五：自定义Shell脚本方案

适用场景：需要完全控制格式化流程，或环境限制无法使用上述方案时。

脚本内容：

#!/bin/sh
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write
echo "$FILES" | xargs git add

exit 0

补充说明：如遇格式化后文件仍显示修改的问题，可添加post-commit钩子：

#!/bin/sh
git update-index -g

方案对比与选型建议

| 方案 | 适用场景 | 复杂度 | 功能完整性 | 维护成本 | |------|---------|--------|------------|----------| | lint-staged | 多工具链集成 | 中 | 高 | 低 | | pretty-quick | 简单格式化 | 低 | 中 | 低 | | Husky.Net | .NET生态 | 中 | 高 | 中 | | git-format-staged | 部分暂存文件 | 高 | 高 | 中 | | Shell脚本 | 定制化需求 | 高 | 可定制 | 高 |

新手推荐：方案二(pretty-quick)最为简单易用；团队项目推荐方案一(lint-staged)以获得更好的扩展性。