前端工程化之---git hooks

git hook 和 husky

1、git hook 让我们可以在 git 执行一些行为的前后时机,执行一些脚本。

2、比如 pre-commit ,能够在我们真正提交 commit 之前先执行一段代码,如果这段代码报错(exit 1),提交会被取消;如果正常执行,commit 会被真正提交。

3、或是 commit-msg,也能在真正 commit 前拿到 commit 信息内容,去做一些检验工作。

4、利用 git hook 的能力,我们就可以在 commit 前做一些风格检验或格式化,比如 ESLint、Prettier、commit 格式等。

5、git hook 是 sh 脚本,在项目 .git/hooks 目录下。这有一个比较尴尬的问题:.git 下的文件是不会被 git 提交的。husky 就是解决这个问题的一个方案。

安装husky

Husky 是一款管理 git hooks 的工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push, 有助于我们在项目开发中的git规范和团队协作

javascript 复制代码
yarn add -D husky
# 或用 npm
npm install husky --save-dev

执行husky初始化

通过执行下面的命令可以生成一个.husky的文件

1、在package.json文件中配置, 执行 npm run prepare

这么安装的好处是如果其他通过忘记安装,只要执行npm install就会安装husky

javascript 复制代码
{
  "scripts": {
    "prepare": "husky install"
  }
}

2、直接执行:npx husky install

安装 lint-staged

在提交信息时,可以对提交的文件进行eslint、premitter检查

npm add -D lint-staged

package.json文件的配置

javascript 复制代码
"lint-staged": {
     "src/**/*.{js,ts,svelte}": [
          "npm run lint:prettierrc",
          "npm run lint",
          "git add ."
      ]
}

在.husky文件夹下的pre-commit文件内配置

在每次提交commit信息时,都会对提交的内容进行eslint、premitter进行检查

javascript 复制代码
npx lint-staged --allow-empty $1

安装 @commitlint

@commitlint 是一个用于检查git commit消息的工具。它允许你定义规则以确保所有的commit消息都是统一和有意义的。这对于维护一个清晰的版本历史记录非常有帮助,特别是当你在团队环境中工作时,确保每个人都遵守相同的提交信息格式标准。它可以与husky结合使用,在每次提交时自动运行并验证commit消息。

javascript 复制代码
pnpm add @commitlint/{cli,config-conventional} -D

commitlint.config.cjs配置

为什么是 cjs ?因为要加载ES module,要么在package中设置type为module,要么修改后缀为cjs

javascript 复制代码
export default { extends: ['@commitlint/config-conventional'] };

.husky文件夹中新建一个脚本commit-msg

javascript 复制代码
pnpm exec commitlint --config commitlint.config.cjs --edit "${1}"
相关推荐
不穿铠甲的穿山甲6 小时前
git-显示顺序与提交顺序不一致的问题
git
ZXF_H10 小时前
pip安装github上的开源软件包
git·python·github·pip
前端李易安19 小时前
Git工作原理与常用方法汇总
git
黎相思1 天前
Git的安装和使用
git
xianwu5431 天前
MySQL索引原理
linux·开发语言·网络·c++·git
purples.1 天前
上传本地文件到GitHub
windows·git·github
Blue桃之夭夭1 天前
Git Github Gitlab与Gitee的关系
git·gitee·gitlab
Evenurs1 天前
【git】取消一个已提交的文件或路径的追踪
大数据·git·elasticsearch