摘要:現(xiàn)在大前端主要有兩種鉤子插件與都在用,在用。而前端的小伙伴們則可以用插件與,來使鉤子生效。注意一般為隱藏文件,可以把項(xiàng)目拖入中查看文件里的內(nèi)容一般不允許手動(dòng)更改的。
一、前言
現(xiàn)在最流行的版本管理工具非git莫屬,而良好的代碼規(guī)范有助于項(xiàng)目的維護(hù),為了防止一些不規(guī)范的代碼 commit并push到遠(yuǎn)端,我們可以在git命令執(zhí)行前用一些鉤子來檢測(cè)并阻止。現(xiàn)在大前端主要有兩種git鉤子插件:husky(jquery與next.js都在用),pre-commit(antd在用)。
下面我將現(xiàn)介紹一個(gè)git鉤子,再介紹下husky與pre-commit的用法
用過git的小伙伴們都知道git有很多命令commit、push、rebase等等。那這些命令主要是在執(zhí)行.git文件夾中的東西,那么git 鉤子目錄就是在.git文件夾的hooks下,如下所示:
cd .git/hooks ls -l
上圖為各個(gè)鉤子的案例腳本,可以把sample去掉,直接編寫shell腳本來執(zhí)行。
而前端的小伙伴們則可以用插件husky與pre-commit,來使鉤子生效。
注意: 一般.git為隱藏文件,可以把項(xiàng)目拖入IDE中查看,.git文件里的內(nèi)容一般不允許手動(dòng)更改的。三、husky
husky能夠防止不規(guī)范代碼被commit、push、merge等等。
首先安裝husky
npm install husky --save-dev
或
yarn add husky --dev
編輯package.json文件,如:
{ "scripts": { "precommit": "webpack --config ./web/webpack.config.js", "...": "..." } }
當(dāng)你git commit的時(shí)候,將會(huì)現(xiàn)現(xiàn)執(zhí)行 precommit里的腳本,沒有問題了再提交。
具體案例可查看https://github.com/raoenhui/create-img四、pre-commit
pre-commit能夠防止不規(guī)范代碼被commit,沒有husky這么全面,但是你可以接著安裝pre-push等插件來防止對(duì)應(yīng)的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的配置項(xiàng)非常靈活,還可以下面這樣寫:
{ "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", } }
你配置好后,執(zhí)行git commit命令,它將會(huì)依次執(zhí)行foo、bar、test來檢測(cè)完善代碼。
五、總結(jié)我們已經(jīng)怎么用git鉤子插件了,那么我們一般用它來做什么呢。
prevent commit時(shí),我們可以把eslint以及test命令加上,檢測(cè)代碼規(guī)范:
"scripts": { "precommit": "lint-staged && npm run test" }
prevent publish 主干分支時(shí),我們可以把tag打上:
"scripts": { "precommit": "npm run tag" }
具體怎么自動(dòng)化打tag標(biāo)簽,可以參考我的另外篇文章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 .. :)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://hztianpu.com/yun/96778.html
摘要:形成良好統(tǒng)一的代碼規(guī)范,有利于提高代碼的可讀性,減少潛在的錯(cuò)誤,便于團(tuán)隊(duì)協(xié)作開發(fā)。其中是可選的,如果沒有則禁用所有規(guī)則,如果有則禁用所有規(guī)則。也可以定義一個(gè)命令同時(shí)運(yùn)行這兩個(gè)命令,我在這里使用了我們定義了在鉤子觸發(fā)時(shí)會(huì)執(zhí)行命令。 形成良好統(tǒng)一的代碼規(guī)范,有利于提高代碼的可讀性,減少潛在的錯(cuò)誤,便于團(tuán)隊(duì)協(xié)作開發(fā)。本文簡(jiǎn)單介紹JS、CSS、 Git Commit 的規(guī)范工具及用法。 Lin...
摘要:對(duì)于項(xiàng)目的編碼規(guī)范而言,主要有兩種選擇和。此外由于性能問題,官方?jīng)Q定全面采用,甚至把倉庫作為測(cè)試平臺(tái),而的解析器也成為獨(dú)立項(xiàng)目,專注解決雙方兼容性問題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言,主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼,通過配置解析器,也能規(guī)范TS代碼。此外由...
摘要:對(duì)于項(xiàng)目的編碼規(guī)范而言,主要有兩種選擇和。此外由于性能問題,官方?jīng)Q定全面采用,甚至把倉庫作為測(cè)試平臺(tái),而的解析器也成為獨(dú)立項(xiàng)目,專注解決雙方兼容性問題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言,主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼,通過配置解析器,也能規(guī)范TS代碼。此外由...
摘要:對(duì)于項(xiàng)目的編碼規(guī)范而言,主要有兩種選擇和。此外由于性能問題,官方?jīng)Q定全面采用,甚至把倉庫作為測(cè)試平臺(tái),而的解析器也成為獨(dú)立項(xiàng)目,專注解決雙方兼容性問題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言,主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼,通過配置解析器,也能規(guī)范TS代碼。此外由...
摘要:目前基本使用三款代碼質(zhì)量檢查工具。使用腳本檢查,可以參考里面如何使用文件名是在之前啟用的鉤子函數(shù),利用查看當(dāng)前有哪些文件修改過,只對(duì)指定文件夾中修改的文件使用進(jìn)行代碼檢查,漸進(jìn)式對(duì)整個(gè)項(xiàng)目實(shí)現(xiàn)代碼規(guī)范。 目前基本使用三款js代碼質(zhì)量檢查工具: jslint, jshint, eslint。許多IDE里面也有對(duì)應(yīng)的檢查插件,在每次ctrl + s 保存文件的時(shí)候,檢查當(dāng)前文件是否符合規(guī)范...
閱讀 3298·2021-09-22 15:50
閱讀 3540·2021-09-10 10:51
閱讀 3292·2019-08-29 17:10
閱讀 3047·2019-08-26 12:14
閱讀 2018·2019-08-26 12:00
閱讀 1179·2019-08-26 11:44
閱讀 814·2019-08-26 11:44
閱讀 2930·2019-08-26 11:41