蛋炒饭的前端笔记

外观

CommitLint

注

husky：https://typicode.github.io/husky

simple-git-hooks：https://github.com/toplenboren/simple-git-hooks/tree/master

lint-staged：https://github.com/lint-staged/lint-staged

commitizen：https://commitizen-tools.github.io/commitizen

cz-git：https://cz-git.qbb.sh/zh/guide

01 安装依赖包

  • 使用 husky
pnpm i husky lint-staged @commitlint/{cli,types,config-conventional} commitizen cz-git -D
  • 使用 simple-git-hooks
pnpm i simple-git-hooks lint-staged @commitlint/{cli,types,config-conventional} commitizen cz-git -D

02 依赖包介绍

  • husky 允许在 git 的生命周期中使用钩子执行特定的操作，会生成 .husky 文件
  • simple-git-hooks 可以作为 husky 的替代品，更简洁
  • lint-staged 针对添加到 git 暂存区的文件进行处理
  • @commitlint/cli 对 git 提交的 msg 进行校验
  • @commitlint/config-conventional 提交 msg 校验规则集
  • commitizen 使用交互式命令行进行提交的小工具
  • cz-git commitizen 的插件

03 初始化 git hooks 配置

在 git 的生命周期钩子中执行某些命令，这里主要是 pre-commit 钩子，在 git commit 之前执行

1️⃣ 使用 husky

pnpm exec husky init

在 .husky/pre-commit 文件中配置相关命令

pnpm run lint-staged

2️⃣ 使用 simple-git-hooks

package.json
{
  "simple-git-hooks": {
    "pre-commit": "pnpm run lint-staged"
  }
}

执行脚本更新 git hooks 配置

# [Optional] These 2 steps can be skipped for non-husky users
git config core.hooksPath .git/hooks/
rm -rf .git/hooks

# Update ./git/hooks
npx simple-git-hooks

04 配置 lint-staged

针对 git 暂存区的文件进行处理，执行某些命令

可以在 package.json 中增加 lint-staged 配置项，也可以新增 .lintstagedrc 文件

package.json
{
  "scripts": {
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{vue,js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,less,scss,html,md}": ["prettier --write"],
    "package.json": ["prettier --write"]
  }
}

05 设置 commitlint 配置

对 git 提交的 msg 进行校验

commitlint.config.js

06 配置运行脚本

在 package.json 中配置运行脚本，配置 cz-git 小工具等

package.json
{
  "scripts": {
    "lint-staged": "lint-staged",
    "commit": "bash commit.sh"
  },
  "lint-staged": {
    "*.{vue,js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,less,scss,html,md}": ["prettier --write"],
    "package.json": ["prettier --write"]
  },
  // 指定使用的适配器
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }
}

该脚本用于在提交代码时，自动执行拉取仓库、 lint-staged、commitizen 等工具，确保代码质量和提交信息的规范性。

commit.sh
#!/bin/bash

# 检查远程仓库是否存在
git ls-remote &> /dev/null

# 获取上一个命令的退出状态
exit_status=$?

if [ $exit_status -eq 0 ]; then
    echo "远程仓库存在，执行 git pull 和 git push"
    git pull
    git add -A # 添加所有文件到暂存区
    git-cz # 弹出命令行提交选项，提交代码到本地仓库
    git push # 将代码推送到远程仓库
else
    echo "远程仓库不存在，仅执行 git add 和 git-cz"
    git add -A
    git-cz
fi