本文講述的是如何利用三方插件進行代碼檢測,
準備工作
- 了解eslint的基本用法
- 了解git鉤子
- 使用第三方husky,lint-staged
git鉤子是什么
git 鉤子是git為我們提供的事件的回調,這些文件在 文件的根目錄中的
.git/hooks
中大多是.sample
后綴的文件夾,這些都是shell命令,通過出去這個后綴即可觸發
.git
這個文件需要通過文件夾設置查看隱藏文件即可看到
git官網鉤子介紹
我們的目的是想在提交前使用eslint來驗證是否正確,正確才是其提交這樣的話就需要用到pre-commit
這個鉤子
husky與lint-staged是什么如何用
husky 是檢測鉤子函數的一個工具目前最新的是@1.0.1, lint-staged則是檢測git暫存區的工具
兩者的使用也非常簡單:
npm i husky lint-staged eslint -D
注意一點,husky在安裝的時候會通過你的命令來初始化.git/hooks中的鉤子,所以一定要先讓自己的文件受git的控制,如果沒被控制只需要git init
即可,如果因為某些原因需要重新初始化,則可以node ./node_modules/husky/lib/installer/bin.js install
或者重新安裝husky這樣就能初始化了
配置husky與lint-staged
// package.json
// linters中的"src/**/*.js"這個是檢測的文件夾可以修改這個的意思是檢測src下所有層級的js
// 需要注意的lint-staged這個如果報錯則創建一個.lintstagedrc把 { "linters" : {...} }放進去即可
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"linters": {
"src/**/*.js": [
"./node_modules/.bin/eslint --fix",
"git add"
]
}
}
內網中搭建
本次是在內網中搭建的著實麻煩,首先要吧對應的npm包按照層級保存在內網的包中,如果大家公司條件好點可以開代理或者白名單,如果和筆主一樣苦逼只能通過壓縮好了放入這種方式稱之為離線安裝
,由于husky在首次安裝的時候會初始化.git/hooks
中的文件,所以一定要注意存在.git
否則會不成功,如果通過cnpm 會有下劃線開頭,也會多一個重復的包,./node_modules/.bin
中的對應的名稱與.cmd
的文件也就是下劃線的可以通過其內容來恢復
當然每個項目手動去初始化肯定是不好的,可以通過在script start 中去初始化與氣動項目使用
node ./node_modules/lib/installer/bin.js && 啟動你的項目
來操作,這個的意思是先啟動前者之后在啟動項目,如果是webpack 啟動的就要注意不要把初始化放在后面,這樣它可能誤識別成參數了 。
在啟動bin.js 同層級的index.js中可以通過修改源碼(不建議,不得已為之)通過使用fs.existsSync(path)
來判斷pre-commit是否存在如果不存在就初始化,如果存在了就不做處理這樣就完成了一次內網搭建與排除各種小問題