Husky v8.x 配套工具的安装配置

Husky v8.x 配套工具的安装配置

husky v6.0包含break change, 该文仅包含 husky v8.x 的安装配置，从 v4.x 迁移请参考 Migrating from v4

添加 pre-commit hook 需要安装以下依赖：

• husky
• lint-staged

添加 commit-msg hook 选装以下依赖：

• commitizen
• @commitlint/cli
• @commitlint/config-conventional

以上依赖经实践测试的是 husky@8.0.3、lint-staged@13.2.2、commitizen@4.3.0、@commitlint/cli@17.8.0、@commitlint/config-conventional@17.8.0

1. Install husky, lint-staged

npm install husky lint-staged --save-dev

2. 自动启用 husky

npm pkg set scripts.prepare="husky install" && npm run prepare

3. Add commit-msg hook

新版 husky 中$HUSKY_GIT_PARAMS 不再使用

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

4. 安装 commitlint 相关依赖

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

在根目录新建一个commitlint.config.js文件并加入如下内容：

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

5. add pre-commit hook

npx husky add .husky/pre-commit "npx lint-staged"

添加交互式 git commit 配置

1. install commitizen

npm install --save-dev commitizen

2. 初始化

npx commitizen init cz-conventional-changelog

执行完成后，会在 package.json 中追加以下配置：

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

进入交互式 git commit:

npx git-cz

3. 配置 cz 的命令

npm pkg set scripts.commit="git-cz"

lint-staged 的配置示例

在 package.json 中添加关于 ts、tsx、js、jsx、vue、css、json、md等代码的 lint、prettier 配置

"lint-staged": {
    "*.[tj]s?(x)": [
      "eslint --fix"
    ],
    "*.vue": [
      "eslint --fix"
    ],
    "*.{css,less,scss,json,md}": [
      "prettier --write"
    ]
  }