git commit前檢測husky與pre-commit

pakolagij 發布于2019-08-23 10:53 / 586人閱讀

摘要：現在大前端主要有兩種鉤子插件與都在用，在用。而前端的小伙伴們則可以用插件與，來使鉤子生效。注意一般為隱藏文件，可以把項目拖入中查看文件里的內容一般不允許手動更改的。

一、前言

現在最流行的版本管理工具非git莫屬，而良好的代碼規范有助于項目的維護，為了防止一些不規范的代碼 commit并push到遠端,我們可以在git命令執行前用一些鉤子來檢測并阻止。現在大前端主要有兩種git鉤子插件：husky（jquery與next.js都在用），pre-commit(antd在用)。
下面我將現介紹一個git鉤子，再介紹下husky與pre-commit的用法

二、git鉤子

用過git的小伙伴們都知道git有很多命令commit、push、rebase等等。那這些命令主要是在執行.git文件夾中的東西，那么git 鉤子目錄就是在.git文件夾的hooks下，如下所示：

    cd .git/hooks
    ls -l

上圖為各個鉤子的案例腳本，可以把sample去掉，直接編寫shell腳本來執行。
而前端的小伙伴們則可以用插件husky與pre-commit，來使鉤子生效。

注意： 一般.git為隱藏文件，可以把項目拖入IDE中查看,.git文件里的內容一般不允許手動更改的。

三、husky

husky能夠防止不規范代碼被commit、push、merge等等。
首先安裝husky

    npm install husky --save-dev

或

    yarn add husky --dev

編輯package.json文件，如：

{
  "scripts": {
    "precommit": "webpack  --config ./web/webpack.config.js",
    "...": "..."
  }
}

當你git commit的時候，將會現現執行 precommit里的腳本，沒有問題了再提交。

具體案例可查看https://github.com/raoenhui/create-img

四、pre-commit

pre-commit能夠防止不規范代碼被commit，沒有husky這么全面，但是你可以接著安裝pre-push等插件來防止對應的git操作。下面以pre-commit為例：

首先安裝pre-commit

    npm install pre-commit --save-dev

編輯package.json文件，如：

"scripts": {
    "test": "echo "Error: I SHOULD FAIL LOLOLOLOLOL " && exit 1",
    "foo": "echo "fooo" && exit 0",
    "bar": "echo "bar" && exit 0"
  },
  "pre-commit": [
    "foo",
    "bar",
    "test"
  ]

pre-commit的配置項非常靈活，還可以下面這樣寫：

{
  "precommit": "foo, bar, test"
  "pre-commit": "foo, bar, test"
  "pre-commit": ["foo", "bar", "test"]
  "precommit": ["foo", "bar", "test"],
  "precommit": {
    "run": "foo, bar, test",
  },
  "pre-commit": {
    "run": ["foo", "bar", "test"],
  },
  "precommit": {
    "run": ["foo", "bar", "test"],
  },
  "pre-commit": {
    "run": "foo, bar, test",
  }
}

你配置好后，執行git commit命令，它將會依次執行foo、bar、test來檢測完善代碼。

五、總結

我們已經怎么用git鉤子插件了，那么我們一般用它來做什么呢。
prevent commit時，我們可以把eslint以及test命令加上，檢測代碼規范：

"scripts": {
    "precommit": "lint-staged && npm run test"
  }

prevent publish 主干分支時，我們可以把tag打上：

"scripts": {
    "precommit": "npm run tag"
  }

具體怎么自動化打tag標簽，可以參考我的另外篇文章https://raoenhui.github.io/nodejs/git/2018/03/30/nodejs%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90tag

參考資料

https://raoenhui.github.io/nodejs/git/2018/08/10/preventcommit

https://www.npmjs.com/package/husky

https://www.npmjs.com/package/pre-commit

https://www.jianshu.com/p/072a96633479

Happy coding .. :)

GPU云服務器云服務器 husky git 與服務器 git 與服務器配置 git與云服務器連接

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96778.html

Lint Your Code

摘要：形成良好統一的代碼規范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團隊協作開發。其中是可選的，如果沒有則禁用所有規則，如果有則禁用所有規則。也可以定義一個命令同時運行這兩個命令，我在這里使用了我們定義了在鉤子觸發時會執行命令。形成良好統一的代碼規范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團隊協作開發。本文簡單介紹JS、CSS、 Git Commit 的規范工具及用法。 Lin...

hidogs 2019-08-23 10:27 評論0 收藏0
在Typescript項目中，如何優雅的使用ESLint和Prettier

摘要：對于項目的編碼規范而言，主要有兩種選擇和。此外由于性能問題，官方決定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規范js代碼，通過配置解析器，也能規范TS代碼。此外由...

chemzqm 2019-08-02 15:27 評論0 收藏0
在Typescript項目中，如何優雅的使用ESLint和Prettier

摘要：對于項目的編碼規范而言，主要有兩種選擇和。此外由于性能問題，官方決定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規范js代碼，通過配置解析器，也能規范TS代碼。此外由...

WilsonLiu95 2019-08-23 18:29 評論0 收藏0
在Typescript項目中，如何優雅的使用ESLint和Prettier

摘要：對于項目的編碼規范而言，主要有兩種選擇和。此外由于性能問題，官方決定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規范js代碼，通過配置解析器，也能規范TS代碼。此外由...

琛ｈ。 2019-08-30 11:18 評論0 收藏0
pre-commit鉤子，代碼質量檢查

摘要：目前基本使用三款代碼質量檢查工具。使用腳本檢查，可以參考里面如何使用文件名是在之前啟用的鉤子函數，利用查看當前有哪些文件修改過，只對指定文件夾中修改的文件使用進行代碼檢查，漸進式對整個項目實現代碼規范。目前基本使用三款js代碼質量檢查工具： jslint, jshint, eslint。許多IDE里面也有對應的檢查插件，在每次ctrl + s 保存文件的時候，檢查當前文件是否符合規范...

stefanieliang 2019-08-02 11:46 評論0 收藏0