在軟體開發程序中，代碼風格檢查（Code Linting）是保障代碼規范和一致性的有效手段，過去，Lint 的作業一般在 CodeReview 或者 CI 的時候進行，但這樣會導致問題的反饋鏈，浪費不必要的時間，因此，我們需要利用 Git 的 Pre Commit 鉤子，將 Lint 程序放到開發者提交代碼之前，
簡介
簡單介紹一下這三個工具：
prettier 用來優化代碼格式，比如縮進、空格、分號等等
husky可以用于實作各種 Git Hook，這里主要用到 pre-commit這個 hook，在執行 commit 之前，運行一些自定義操作
lint-staged 用于對 Git 暫存區中的檔案執行代碼檢測
實作程序
待提交的代碼
-> git add 添加到暫存區
-> 執行 git commit
-> husky注冊在git pre-commit的鉤子調起 lint-staged
-> lint-staged 取得所有被提交的檔案依次執行寫好的任務（ESLint 和 Prettier）
-> 如果有錯誤（沒通過ESlint檢查）則停止任務，等待下次commit，同時列印錯誤資訊
-> 成功提交
安裝
首先，我們使用下面的命令把 husky 和 lint-staged 安裝到package.json的 devDependencies中：
npm install husky lint-staged --save-dev
或者
yarn add husky lint-staged --dev
配置package.json（無prettier）
將下面的代碼追加到 package.json檔案中：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
...
"eslint": "eslint --ext .js,.vue src",
"eslintfix": "eslint --fix --ext .js,.vue src",
"lint-staged": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"**/*.{js,vue}": [
"npm run eslint"
]
},
這里我沒有 加 prettier
配置package.json （有prettier）
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue}": [
"prettier --write",
"vue-cli-service lint",
"git add"
]
}
}
上面示例中lint-staged下的選項是vue專案中常用的配置，你可以根據你專案的技術堆疊配置相應的代碼檢查，
- prettier --write會自動美化你的代碼格式
- vue-cli-service lint是vue專案中語法檢查
- git add將更改后到檔案添加到暫存區
.prettierrc檔案
新建一個.prettierrc檔案，將以下內容復制進去：
{
"trailingComma": "es5", // 尾隨逗號
"tabWidth": 2, // 縮進
"semi": false, // 句尾分號
"singleQuote": true, // 單引號
"end-of-line": "lf" // 換行符
}
這樣，當在終端輸入 git commit命令提交代碼的時候，Lint 程式便會自動檢查本次提交所修改的檔案是否符合本專案的代碼規范，如果代碼不符合規范，便會拒絕提交代碼，
如果想要跳過 Lint 程式，可以使用 git commit -no-verify進行提交，
參考：
git comm
it期間通過git hook 的 pre-commit 修改內容并提交
【工具】提交代碼前的代碼檢查pre-commit
Pre-commit：如何使用 husky、lint-staged和prettier優化你的專案
husky: https://www.npmjs.com/package/husky
lint-staged: https://www.npmjs.com/package/lint-staged
prettier: https://www.npmjs.com/package/prettier
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/216037.html
標籤：AI