Code Lint是前端工程化中的一個重要環節，它可以幫助我們在部署代碼到生產環境之前及時發現錯誤並糾正它們，也可以規范我們的編碼習慣，讓團隊的代碼風格保持統一。
Code Lint的工作原理是借助一些lint工具對代碼進行靜態分析，並在合適的時機觸發校驗，提示錯誤。
在一個團隊項目中，代碼風格不統一，會大大的降低可讀性，也會給后期的維護增加時間成本。如果代碼風格統一、代碼提交信息也簡單明了，那么在后期協作以及處理bug時可以達到事半功倍的效果，所以就需要在我們使用git提交時校驗eslint和提交信息的格式問題。需要用到的插件 husky、lint-staged、commitlint。
一、有哪些 lint？
隨着nodejs和前端工程化的發展，前端圈內產出了很多成熟的Lint工具，主要包括：
eslint 規范並校驗 ECMAScript/JavaScript code的編寫
tslint 規范並校驗 TypeScript code的編寫
stylelint 規范並校驗css/scss/less code的編寫
commitlint 負責校驗commit msg是否符合規范
prettier 或 beautifyjs 統一代碼排版格式
除此之外，我們還需要一些輔助的工具：
husky 能夠監聽git hooks的nodejs包，讓nodejs開發者處理git hooks任務變得更加容易
lint-staged 可以將git“已暫存(staged)”的文件作為參數傳入你要執行的shell script之中
比如集成 commit lint：在小的團隊里，可能我們更注重的是業務產出，並不在乎這些細節。隨着團隊的壯大，commit msg 規范化至關重要，他意味着我們是否清楚自己和同事對代碼干了什么，在代碼排錯、回滾時起到了關鍵性作用。本着“工具比人更可靠”的原則，我們期望通過在項目中集成一些工具，從而實現在執行git commit -m 'msg'時能夠自動的對msg內容進行校驗，無需額外執行其他命令，husky和 commitlint恰好能解決我們這個痛點。
二、理解 git hooks 和 husky
先要介紹一下git hooks，顧名思義hooks為“鈎子”之意，它是“發布訂閱模式”的一種實現，和前端中的DOM事件(click、hover等)相似，Git也預先定義了一些“事件鈎子”如“commit-msg”、“pre-commit”等，當我們執行對應的Git操作時會觸發它們，從而通知訂閱該事件的shell script文件處理我們要進行的任務，這些shell腳本文件存放在項目根目錄下的.git/hooks 目錄中。
我們可以通過編寫這些shell script文件定制我們的校驗任務，但前端工程師大多對linux/windows shell並不擅長，這和我們平時的工作重心有關，因此我們通過編寫git hooks腳本來優化前端工作流的這條道路十分艱難。Nodejs改變了這一切，它讓JavaScript擁有了控制“操作系統”的能力，你只需要安裝nodejs包 husky，它會幫我們自動生成.git/hooks目錄下的shell script，我們便可以很輕松的使用更熟悉的Nodejs處理git hooks任務，而無需關注shell script的實現細節。
// 執行下面命令, 在開發環境中安裝husky，如下所示：
npm install husky --save-dev // 在項目根目錄下package.json文件中添加如下配置，並在hooks字段下添加git hooks監聽任務配置， 如下： // 這是NPM原生支持的腳本執行定義，當執行“npm run 腳本名”時執行
"scripts": { "test": "node test.js" }, // 這是husky擴展的腳本執行的定義方式，當對應git hooks觸發時執行
"husky": { "hooks": { // 可以執行一個js文件，將控制權轉移給我們更熟悉的nodejs
"pre-commit": "node heihei.js", // 也可以調用其他腳本或者執行一段原生shell命令
"commit-msg": "npm run test && echo succeed" } } // 上面的配置只作為測試例子之用，無需真正集成到項目中，大家可以先寫一個小demo嘗試一下，加深一下對git hooks和husky的理解。
三、husky
husky 是一個為 git 客戶端增加 hook 的工具。安裝成功后，它會自動在倉庫中的 .git/hooks/ 目錄下增加相應的鈎子；比如本項目種需要使用的 commit-msg、 pre-commit 鈎子就會在你執行 git commit 的觸發。
// 先安裝最新的husky。
npm install husky --save-dev // 啟動git鈎子。啟用后就可以看到項目根目錄下生成了.husky文件夾。
npx husky install // 然后依次生成我們需要的 git hook。 // 引號中的內容是需要執行的腳本，可以在對應的官網中找到，下面會給出地址。
npx husky add .husky/pre-commit 'lint-staged' npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
生成后就可以在.husky/下看到我們生成的兩個git hook，commit-msg和 pre-commit
#!/bin/sh . "$(dirname "$0")/_/husky.sh" npx --no -- commitlint --edit $1
#!/bin/sh . "$(dirname "$0")/_/husky.sh" npx lint-staged
四、lint-staged
每次檢查代碼我們不需要檢查全項目的文件，那樣只會增加時間成本，這時候就需要用到 lint-staged，一個僅僅過濾出 Git 代碼暫存區文件（被 git add 的文件）的工具。
npm install lint-staged -D
五、commitlint
正如官方文檔中所言，commitlint幫助你的團隊遵守commit約定，檢查你的提交消息是否符合傳統的提交格式。
npm install -D @commitlint/cli @commitlint/config-conventional
隨后要添加配置文件，文件的格式可以是 commitlint.config.js、.commitlintrc.js、.commitlintrc、 .commitlintrc.json、 .commitlintrc.yml文件，或 package.json中的 commitlint字段中定義配置。可以自己創建，也可以按照官網的方式使用下面這行代碼生成，這需要在項目的git命令行中操作（通常是在項目目錄中使用右鍵選擇Git Bash Here）
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
生成后就可以在commitlint.config.js文件中，制定提交信息的規范，相關配置項可以參考官方文檔：https://commitlint.js.org/#/reference-rules?id=rules
這里暫時只制定了基礎的規范，只能使用feat、fix、docs、style、refactor、test、revert這7中格式進行提交。
/** * rule由key和配置數組組成 * 如：'key:[0, 'always', 72]' * 數組中第一位為level，可選0,1,2，0為disable，1為warning，2為error， * 第二位為是否應用，可選always|never， * 第三位該rule的值 * * 提交信息可自定義規范 * feat：新功能（feature） fix：修補bug docs：文檔（documentation） style： 格式（不影響代碼運行的變動） refactor：重構（即不是新增功能，也不是修改bug的代碼變動） test：增加測試 chore：構建過程或輔助工具的變動 * **/ module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [2, 'always', [ "feat", "fix", "docs", "style", "refactor", "test", "revert" ]] } }
// 寫在 package.json中，格式為：
"commitlint": { "rules": { "type-enum": [2, 'always', ["feat", "fix", "docs", "style", "refactor", "test", "revert"]] } }
六、配置項
需要的插件都安裝成功后，就可以在 package.json 中配置 pre-commit 鈎子函數的執行內容。
這里對lint-staged的配置是：對src下的所有.js和.vue文件先代碼檢查，然后代碼修復，最后添加至緩存區。此修復只會修復一些簡單的eslint格式錯誤，修復不了的格式錯誤，就會報錯提交失敗。隨后在校驗提交信息的格式。
"husky": { "hooks": { "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS", "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix --ext .js,.vue", "git add" ] }
這樣才 commit 之前就會自動檢測代碼格式和 git commit 的提交規范了。還有很多其他如 StyleLint 規范等的使用，有需要的時候就可以自己搜索實踐吧。