前端加薪秘诀:mac下配置husky

819 阅读2分钟

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

5.参考文章:

链接:git提交规范工具git hooks+husky+lint-staged+commitlint