每個人的編碼習慣都是不一樣的，那如何在團隊工作中保證所有人，按照一套統一的規范來編碼呢？
首先，使用 ESLint 來統一代碼規范。ESLint是能在編譯中發現代碼錯誤的工具，在團隊協作中，可以避免低級 Bug 或錯誤警告之類的，產出風格統一的代碼。
為了保證每個人提交的代碼都是規范的，則需要使用 Git 鈎子來做最后一道關卡。
Git 鈎子就是 Git 在特定的重要動作發生時觸發自定義腳本。
Git 鈎子分為客戶端和服務端。此時只看客戶端鈎子。
客戶端鈎子有兩種：
- pre 前置鈎子，在動作開始前調用
- post 后置鈎子，在動作執行后調用
當鈎子在非零狀態下退出，git 操作就會停止。
因為要做的是在代碼提交前做規范性的檢查，所以 使用了 pre-commit 鈎子。
在鈎子函數里寫入指令 執行 eslint 檢查代碼，執行到鈎子函數時，會先執行指令。eslint檢查代碼規范，則下一步。不規范則非零退出，停止git操作。
安裝插件
npm install eslint husky lint-staged --save-dev
-
eslint 代碼規范檢查工具。可以在 .eslintrc.js 文件自行配置規則。
-
husky 在 .git/hooks 中寫入 pre-commit 等腳本激活鈎子，在 Git 操作時觸發；
-
lint-staged 參考 Git 中 staged 暫存區概念，在每次提交時只檢查本次提交的文件。(為了不檢查所有文件，提高性能)
修改 package.json 文件
"scripts": {
...
"lint-staged": "lint-staged",
...
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
執行流程
每次執行 commit 前 會先去執行 npm run lint-staged
npm run lint-staged 會去匹配配置好的文件，執行對應的檢查機制。
stylelint 檢查所有的 less 文件
js,jsx,ts,tsx 按照 eslint 檢查，不符合的 會提示 按照 .prettierrc.js 的配置優化。
總結
至此，團隊開發中代碼風格獲得了統一，減少了開發bug，避免了了不必要的問題。