前端项目git提交时做代码规范验证

前端项目git提交时做代码规范验证

需要使用到的插件：

• husky ，是一个 Git Hook 工具，为 git 客户端增加 hook 的。

• lint-staged ，在git提交前，进行代码规则检查确保入库的代码都符合代码规则，如果对整个项目进行lint这样速度太慢，lint-staged 可以让lint 只检测暂存区的文件，提高检测速度。

当前依赖版本：husky版本：^8.0.1 ，lint-staged版本：^13.0.3

安装依赖

pnpm install -D husky lint-staged

配置

• 配置 husky

  当前版本 husky 需要独立配置，将配置写入到 package.json 文件，或使用 .huskyrc 不起作用。具体操作如下：

  # 初始化
  pnpm set-script prepare "husky install"
  pnpm run husky
  

  # 添加hook
  npx husky add .husky/pre-commit "npm test"
  

  设置该hook后，在执行 git commit 命令时会先执行 npm test ，如果执行成功则会正常执行 git commit ；否则会中断 git commit 。

• 配置 lint-staged

  /* 在package.json文件中的配置 */
  {
      /*...*/
      "lint-staged": {
          "*.{js,ts,tsx,vue,md,json,yml}": [
              "eslint ./src --ext .ts,.vue --fix"
          ]
      }
  }
  

  # 执行 npx lint-staged，即可验证对应规则
  npx lint-staged
  

使用

更改 .husky/pre-commit 文件内容，让其在 pre-commit 阶段执行 npx lint-staged

原始内容：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

修改后内容：

移除 npm test ，添加 npx lint-staged

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

也可在 husky 添加 hoos 时直接设置 pre-commit 对应的命令为 npx lint-staged