前端工程化之---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}"

前端工程化之---git hooks

git hook 和 husky

安装husky

执行husky初始化

安装 lint-staged

package.json文件的配置

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

安装 @commitlint

commitlint.config.cjs配置

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

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