通过配置Git pre-commit钩子或使用husky + lint-staged，可在提交前自动校验并格式化CSS文件，确保代码风格统一。1. 安装Prettier并配置规则；2. 创建pre-commit脚本检查暂存的CSS文件是否格式化，未格式化则阻断提交；3. 为脚本添加执行权限；4. 推荐用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” ]; thenexit 0fi
echo “检测到以下 CSS 文件将被提交：”echo “$STAGED_CSS_FILES”
临时保存格式化后的内容进行比对
HAS_UNFORMATTED=false
for file in $STAGED_CSS_FILES; do
检查文件是否存在（避免删除等情况）
if [ ! -f “$file” ]; thencontinuefi
使用 prettier 格式化内容，并与原文件比较
FORMATTED_CONTENT=$(npx prettier –parser css “$file”)
if [ “$(cat “$file”)” != “$FORMATTED_CONTENT” ]; thenecho “错误：文件 $file 未格式化，请先运行 prettier 格式化。”HAS_UNFORMATTED=truefidone
如果存在未格式化的文件，阻止提交
if [ “$HAS_UNFORMATTED” = true ]; thenecho “提交被拒绝。请先格式化 CSS 文件。”exit 1fi
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 被提交，提升代码一致性。
以上就是Linux git hooks自动校验CSS提交前是否格式化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595821.html
微信扫一扫 
支付宝扫一扫 
