1.初始化.git
git init
2.husky初始化
2.1 安装husky
npm install husky@8.0.0 -D
2.2 使用husky-init用于快速初始化husky项目。
npx husky-init && npm install
执行完毕之后会出现两个情况:
a. 在项目中生成.husky目录,并在目录中新建pre-commit文件
b. 在package.json生成prepare脚本
2.3 修改pre-commit
这个文件主要用来提交前检测代码规范,通常会配合这个插件来使用:lint-staged
优点是只会校验我们修改过的代码,而不会全局校验。使用也很简单直接安装即可
npm install lint-staged -D
修改package.json
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"prettier --write",
"eslint --fix"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
"prettier --write--parser json"
],
"package.json": [
"prettier --write"
],
"*.vue": [
"prettier --write",
"eslint --fix",
"stylelint --fix"
],
"*.{scss,less,styl,html}": [
"prettier --write",
"stylelint --fix"
],
"*.md": [
"prettier --write"
]
},
最后修改pre-commit 文件
# ~/.huskyrc
export NVM_DIR="$HOME/.nvm"
# 如果终端是bash
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion" # This loads nvm bash_completion
# 如果终端是zsh
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
npx lint-staged
这样我们执行如果没通过就会如下所示
2.4 添加commit-msg
commitlint检查提交消息是否符合常规提交格式,用于在每次提交时生成符合规范的commit消息。
1.安装依赖包
npm install --save-dev @commitlint/config-conventional @commitlint/cli
下面是我的包信息,我用的是node18+
{
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
}
2.在项目根目录下添加commitlintrc.js配置文件,配置文件详细说明如下:
export default {
extends: ['@commitlint/config-conventional']
};
3.在项目.husky目录下添加commitlint.config.js配置文件
百度了一下写法都是:
npx husky add .husky/commit-msg "npm run commitlint"
可是我执行的时候都会提示add命令已废弃,于是就自己复制了pre-commit文件,这里要注意的是不要自己手动右键文件这种方式去新建,因为这种新建文件的格式只是一个文本文件不是一个脚本文件。
最后在package.json里创建命令即可
{
"commitlint": "commitlint --config commitlint.config.js -e -V"
}
3.遇到的问题
3.1 提示npm:command not found
找了半天发现可能是node环境问题,于是参考了网上的方案在文件里加入环境变量
PATH="/usr/local/bin:$PATH"
发现还是不行,还是会提示
后来猜测可能是因为安装了nvm,husky找不到node指定路径,所以需要手动标注下导出的环境变量
方案1:
#!/bin/sh
# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"
# 加载 nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
# 使用 node 执行 commitlint
npm run commitlint
方案2:
# ~/.huskyrc
export NVM_DIR="$HOME/.nvm"
# 如果终端是bash
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion" # This loads nvm bash_completion
# 如果终端是zsh
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
npm run commitlint
最后我们随便输出一个git commit -m xxx
提示下面信息就表示成功啦
4.关于.husk文件要不要上传远端
因为遇到过一个问题就是别人的husky文件你本地clone下来并不生效,所以需要手动自己在跑一遍上面的流程,所以建议最好就是只上传一个空壳文件,比如就是上传pre-commit和commit-msg,但是里面什么内容都没有。这样既能督促小伙伴自己去配置,又不会绕过提交信息检测。
最好在.gitignore中加入
# Husky
.husky