每一名開發人員都有自己獨特的代碼風格。但對於多人協作項目,保持統一的風格有利於項目維護。
我們可以在項目中引入 ESLint、Prettier 來規范代碼,但這無法約束 Git commit message
這時候可以借助 Husky 等工具來把好最后一關
常用工具
1. eslint (https://github.com/eslint/eslint)
JavaScript 代碼檢測工具,檢測並提示錯誤或警告信息
2. prettier (https://github.com/prettier/prettier)
代碼格式化工具,更好的代碼風格效果
3. husky (https://github.com/typicode/husky)
Git hooks 工具, 可以在執行 git 命令時,執行自定義的腳本程序
4. lint-staged (https://github.com/okonet/lint-staged)
對暫存區 (git add) 文件執行腳本
5. commitlint (https://github.com/conventional-changelog/commitlint)
檢測 git commit 內容是否符合定義的規范
一、Husky
Husky 是一款 Git Hooks 工具,可以在執行特定的 git 命令時(如: git commit, git push)觸發對應的腳本
安裝: (當前版本 7.x)
$ npm i -D husky $ npx husky install $ npm set-script prepare "husky install"
執行以上代碼之后,項目的根目錄會多出一個 .husky 文件夾,並且 package.json 中會增加一個腳本執行命令
// package.json
{ "scripts": { "prepare": "husky install" } }
// prepare 會在每次 npm install 的時候執行
現在 husky 已經安裝好了,接下來添加對應的鈎子函數
比如我需要在每次 git commit 提交前執行某些操作,就可以添加一個 commit-msg 鈎子
npx husky add .husky/commit-msg 'npm test'
然后 .husky 目錄下就會增加一個 commit-msg 文件
這樣每一次 git commit 都會執行一次 npm test
// 如果面臨特殊情況,需要繞過 Git Hooks,可以使用 --no-verify
二、 Commitlint
Commitlint 可以校驗 git commit message, 只有規范的 commit message 才能提交
安裝: (當前版本 16.x)
npm i -D @commitlint/{config-conventional,cli}
然后在項目根目錄新建一個 commitlint.config.js 文件
// commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] };
上一節已經在項目中引入了 Husky,修改一下 commit-msg 腳本,在每次 git commit 的時候執行 commitlint 校驗
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1' # or yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
完成以上配置之后,只有滿足規范的 commit message 才能提交(具體的規范可以查看文檔)
不滿足規則的提交會報錯,比如:
三、Lint-staged
在提交的代碼的時候,可以通過 ESLint、Prettier 等工具來格式化代碼
但如果直接處理全部代碼,首先是可能存在性能問題,其次是可能會修改掉別的同事的代碼
這時可以引入 lint-staged,它可以過濾出 Git 代碼暫存區文件,這樣就不會影響到未更改的文件
安裝: (當前版本 12.x)
npm i -D lint-staged
然后在項目根目錄創建文件 .lintstagedrc,配置所需要的規則
比如對暫存區的文件做格式化:
{ "*.{js,jsx,less,md,json}": [ "prettier --write" ], "*.ts?(x)": [ "prettier --parser=typescript --write", "eslint --quiet" ] }
甚至對特定文件執行腳本:
{ "src/locales/zh-CN.ts": [ "npm run your-command" ] }
最后通過 Husky 來執行 lint-staged
npx husky add .husky/pre-commit 'npx lint-staged'