前端项目git提交时做代码规范验证

最新推荐文章于 2025-09-26 10:59:58 发布

原创最新推荐文章于 2025-09-26 10:59:58 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#git #前端 #代码规范

本文介绍了如何在前端项目中使用husky和lint-staged来实现在git提交前进行代码规范验证。通过配置husky的pre-commit钩子和lint-staged，可以确保只有符合代码规范的文件才能被提交，提高了代码质量和团队协作效率。

前端项目git提交时做代码规范验证

需要使用到的插件：

husky ，是一个 Git Hook 工具，为 git 客户端增加 hook 的。

lint-staged ，在git提交前，进行代码规则检查确保入库的代码都符合代码规则，如果对整个项目进行lint这样速度太慢，lint-staged 可以让lint 只检测暂存区的文件，提高检测速度。

当前依赖版本：husky版本：^8.0.1 ，lint-staged版本：^13.0.3

安装依赖

pnpm install -D husky lint-staged

配置

配置 husky

当前版本 husky 需要独立配置，将配置写入到 package.json 文件，或使用 .huskyrc 不起作用。具体操作如下：
```
# 初始化
pnpm set-script prepare "husky install"
pnpm run husky
```
```
# 添加hook
npx husky add .husky/pre-commit "npm test"
```
设置该hook后，在执行 git commit 命令时会先执行 npm test ，如果执行成功则会正常执行 git commit ；否则会中断 git commit 。

配置 lint-staged

/* 在package.json文件中的配置 */
{
    /*...*/
    "lint-staged": {
        "*.{js,ts,tsx,vue,md,json,yml}": [
            "eslint ./src --ext .ts,.vue --fix"
        ]
    }
}

# 执行 npx lint-staged，即可验证对应规则
npx lint-staged

使用

更改 .husky/pre-commit 文件内容，让其在 pre-commit 阶段执行 npx lint-staged

原始内容：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

修改后内容：

移除 npm test ，添加 npx lint-staged

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

也可在 husky 添加 hoos 时直接设置 pre-commit 对应的命令为 npx lint-staged