爲代碼提交前加上代碼檢測

本文講述的是如何利用三方插件進行代碼檢測,

準備工作

  1. 瞭解eslint的基本用法
  2. 瞭解git鉤子
  3. 使用第三方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是否存在如果不存在就初始化,如果存在了就不做處理這樣就完成了一次內網搭建與排除各種小問題

demo非內網

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章