本文介绍了如何利用 Git hooks（特别是 pre-commit 钩子）结合 Prettier 工具，在代码提交前自动校验并格式化 CSS 文件，从而强制保障团队协作中 CSS 代码风格的统一性；既提供了手动配置钩子脚本的详细步骤（含 Shell 脚本编写与权限设置），也推荐了更健壮、易维护的 husky + lint-staged 自动化方案——它不仅能拦截未格式化的提交，还能自动修复并重新暂存，真正实现“零干预”的规范化提交流程，显著提升前端工程质量和协作效率。

在使用 Git 进行版本控制时，确保团队协作中代码风格统一非常重要。对于 CSS 文件，提交前自动校验是否已格式化，可以通过 Git hooks 实现自动化检查。下面介绍如何在 Linux 环境下配置 pre-commit 钩子，自动校验 CSS 文件是否符合格式规范。

1. 安装代码格式化工具（如 Prettier）

推荐使用 Prettier 来统一格式化代码。确保项目中已安装并配置好 Prettier：

npm install --save-dev prettier

在项目根目录创建或更新 .prettierrc 配置文件，例如：

{ "semi": false, "trailingComma": "es5", "tabWidth": 2, "useTabs": false, "printWidth": 80, "singleQuote": true }

2. 创建 pre-commit 钩子脚本

Git 的 pre-commit 钩子会在每次执行 git commit 时运行。我们用它来检查所有将要提交的 CSS 文件是否已经格式化。

进入项目的 .git/hooks 目录：

cd .git/hooks

创建或编辑 pre-commit 脚本：

#!/bin/bash

获取所有暂存的 CSS 文件

STAGED_CSS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep '.css$')

如果没有暂存的 CSS 文件，直接退出

if [ -z "$STAGED_CSS_FILES" ]; then exit 0 fi

echo "检测到以下 CSS 文件将被提交：" echo "$STAGED_CSS_FILES"

临时保存格式化后的内容进行比对

HAS_UNFORMATTED=false

for file in $STAGED_CSS_FILES; do

检查文件是否存在（避免删除等情况）

if [ ! -f "$file" ]; then continue fi

使用 prettier 格式化内容，并与原文件比较

FORMATTED_CONTENT=$(npx prettier --parser css "$file")

if [ "$(cat "$file")" != "$FORMATTED_CONTENT" ]; then echo "错误：文件 $file 未格式化，请先运行 prettier 格式化。" HAS_UNFORMATTED=true fi done

如果存在未格式化的文件，阻止提交

if [ "$HAS_UNFORMATTED" = true ]; then echo "提交被拒绝。请先格式化 CSS 文件。" exit 1 fi

exit 0

3. 设置钩子可执行权限

确保 pre-commit 脚本有执行权限：

chmod +x pre-commit

4. （可选）推荐使用 husky + lint-staged 提高可维护性

手动管理 Git hooks 不便于团队共享。建议使用 husky 和 lint-staged 自动化管理钩子。

安装依赖：

npm install --save-dev husky lint-staged

在 package.json 中添加配置：

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.css": [ "prettier --write", "git add" ] }

这样，每次提交 CSS 文件时会自动格式化并重新加入暂存区，无需手动处理。

基本上就这些。通过 Git hooks 或 husky 配合 Prettier，可以有效防止未格式化的 CSS 被提交，提升代码一致性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Githooks自动校验CSS格式化技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。