配置 `git hooks` 安装 husky@7 钩子+`lint-staged@12 格式化缓冲区的内容

问题先行

• git hook husky 不生效问题
  • v4 版本及以上 在 package.json 中配置 husky 字段已经不可用。Why husky has dropped conventional JS config 放弃了传统的js配置。
  • 如果您使用Windows，那么husky只会使用系统上全局安装的版本。这里需要在全局安装 husky

配置 git hooks 安装 husky@7 钩子+lint-staged@12 格式化缓冲区的内容

1. git 版本 > 2.9.0

2. npm install husky --save-dev 在windows下我遇到不生效的问题，有资料显示，windows下用的是全局 husky，需要全局安装，或者 执行node_modules下的 husky 官方有资料，没仔细看。

   • For Windows users, if you see the help message when running npx husky add ..., try node node_modules/.bin/husky add ... instead. This isn’t an issue with husky code.

   1. 启用 git hooks npx husky install，默认会在项目根目录下初始化一个 .husky 目录
   2. 创建钩子

   npx husky add .husky/pre-commit "npm test"
   git add .husky/pre-commit
   

   3. try a commit

   git commit -m "Keep clam and commit"
   

   4. hook 可以放到专职配置文件中， create a config file .huskyrc.json in root folder。
      设置每次hook对应触发执行的脚本。

   {
       "hook": {
           // "pre-commit": "npm test"
           "pre-commit": "lint-staged"
       }
   }
   

   或者 yaml 格式配置 .huskyrc.yml

   hooks:
     pre-commit: 'npm test'
   

3. npm install lint-staged -D

   1. 创建配置文件 .lintstagedrc.json

   {
     "*.{js,mjs,wxml,json,md}": ["prettier -c --write", "git add"],
     "*.{scss, wxss}": ["stylelint --syntax=scss --fix", "git add"]
   }
   

   或者 yaml 格式配置 .linstagedrc.yml

   '*.{js,vue,html,less,json,md,yml,yaml}':
     - prettier -c --write
   

4. 更新 husky 配置，仅对缓存内容执行 hooks 操作

   #let pre-commit hook call lint-staged
   npx husky set .husky/pre-commit "npx lint-staged"
   

   也可以直接 修改 .husky/pre-commit 文件

5. 尝试 commit，验证 hooks 是否生效

规范 commit message 提交

1. global install Commitizen 是一个帮助撰写规范 commit message 的工具。他有一个命令行工具 cz-cli

// 全局安装 Commitizen
npm install -g commitizen

全局安装 Commitizen 后，用 cz-conventional-changelog 适配器来初始化你的项目

// 初始化 cz-conventional-changelog 适配器
commitizen init cz-conventional-changelog --save-dev --save-exact

初始化做了3件事

• 安装 cz-conventional-changelog 依赖
• 把依赖保存到 package.json 的 dependencies 或 devDependencies 中
• 在根目录的 package.json 中 添加如下所示的 config.commitizen

或者，在项目根目录新建一个 .czrc

{
  "path": "cz-conventional-changelog"
}

执行 git cz 效果：

commitlint 校验提交

参考
commitlint 可以检查 commit messages 是否符合常规提交格式，需要一份校验配置，推荐@commitlint/config-conventional 。

1. install commitlint @commitlint/config-conventional

npm i --save-dev @commitlint/config-conventional @commitlint/cli

2. 项目根目录创建 commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
  // rules 里面可以设置一些自定义的校验规则
  rules: {},
};

注意：因为 @commitlint/config-conventional 校验规则遵循 Angular 的规范， 所以我们在用 cz-customizable 自定义中文配置时， 是按照给出的符合 Angular 规范的示例 cz-config-EXAMPLE.js 编写.cz-config.js 的。但是如果你自定义的 Commitizen 配置不符合 Angular 规范，可以使用 commitlint-config-cz 设置校验规则。（推荐还是按照 Angular 规范进行 cz-customizable 自定义配置）

一个项目应该有的配置文件