使用husky統一管理git-hooks,實現git commit之前校驗eslint，通過才能commit成功

git hooks是一些自定義的腳本，用於控制git工作的流程，分為客戶端鈎子和服務端鈎子。完整鈎子說明，請參考官網鏈接

安裝husky

npm install husky --save-dev
復制代碼

初始化husky

方法一

npx husky install
復制代碼

在 package.json 文件 添加下面命令

{
    scripts: { "prepare": "husky install" } } 復制代碼

方法二

npm run prepare
復制代碼

執行完上述安裝命令后，將會發生如下幾個變化：

• 在.git同級目錄生成.husky文件夾，文件夾下有一個可以編輯的示例pre-commit鈎子
• 在package.json中的scripts中添加了"prepare": "husky install"
• 更改.git文件下面的config文件，配置項 core.hooksPath 為 .husky

創建一個hook

要添加另一個鈎子，請使用husky add。

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

更新hooks腳本

修改.husky文件夾下的hooks腳本即可。

卸載並還原husky

npm uninstall husky
// 刪除.husky文件夾，並且重置core.hooksPath
rm -rf .husky && git config --unset core.hooksPath
復制代碼

實戰

項目中commit的時候，校驗eslint, 警告和錯誤都不可以commit

1. 安裝好 husky 之后，創建個 pre-commit 的 gitHook

npx husky add .husky/pre-commit 'npm run lint'
復制代碼

2. 安裝lint-staged

npm install lint-staged --save-dev
復制代碼

lint-stated就是針對Git暫存區的文件做校驗的一個工具。由於在commit之前，我們要提交的文件是在暫存區的，我們可以利用這個工具來校驗我們即將commit的文件，而不會校驗其它的文件

配置lint-staged

// package.json
{
    scripts: {
        lint-staged: "lint-staged"
    },
    "lint-staged": {
    "*.{js,vue}": [
      "eslint --max-warnings 0"
    ]
  }
}
復制代碼

修改 .husky/pre-push文件

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

npm run lint-staged
復制代碼

總結寫流程： 我們提交 commit 的時候，觸發了 pre-push的gitHook, 就執行了里面的腳本 lint-staged, 然后執行了 eslint --max-warnings 0, 最終eslint 0 警告 0 錯誤就可以commit成功，反之不行。

參考文章：

詳解如何在項目中使用git Hooks（husky、yorkie）

作者：阿離王
鏈接：https://juejin.cn/post/7075940781361463327
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。