>[success] # 提交前檢查 ~~~ 1.針對代碼整體檢查可以分為四個階段： 1.1.編碼時檢查：編寫代碼時檢查，通常表現為由 IDE 自動實時檢查并進行代碼提示。 1.2.編碼后檢查：編寫代碼后檢查，通常表現為手動調用檢查腳本 / 工具進行代碼的檢查 或者代碼保存后由 IDE 自動檢查當前文件。 1.3.構建前檢查：構建執行前檢查，通常表現為將代碼檢查作為構建任務的一個前置切 面，構建時自動觸發代碼檢查。 1.4.提交前檢查：git commit 前檢查，通常表現為將代碼檢查作為 git commit 的一個 hooks 任務，代碼提交前自動觸發代碼檢查。 '編碼時'和'編碼后'其實有時候可以看作一體，當你使用了類似vscode 這類工具編碼，并安裝 了'eslint' 這類插件通過配置便可以在編寫時候今天錯誤提示，當然如果你這些都沒有做 就是需要編碼后運行'eslint' 檢查腳本的指令幫助你發現代碼錯誤 '構建前檢查',表現在現在用的 打包工具gulp 以及 webpack 配合 ~~~ >[danger] ##### 提交前檢查 ~~~ 1.提交前當我們使用git 等這類工具的時候，在提交的時候做最后一道防護，防止團隊 成員提交的代碼風格和團隊不同 ~~~ >[danger] ##### git 提供的鉤子 1. `pre-commit`在提交信息**編輯前**運行，在這個階段塞入**代碼檢查**流程，檢查未通過返回非零值即可停止提交流程； 2. `prepare-commit-msg`在默認信息被創建之后運行，此時正是**啟動編輯器前**，可在這個階段加載`commitizen`之類的輔助填寫工具； 3. `commit-msg`在**完成編輯后**運行，可在這個階段借助`commitlint`進行提交信息規范性檢查； 4. `post-commit`在**提交完成后**運行，在這個階段一般做一些通知操作。 >[info] ## 使用husky 直接去改動`git hook`是不明智因為改動本地的鉤子是無法同步到遠程倉庫的git 鉤子上，因此可以使用 `husky`是一個`Git hooks`工具，能夠在項目中配置hooks腳本；當我們執行git操作時，自動觸發配置的腳本；并且在指定`git hook` 鉤子去配置要執行的腳本 >[danger] ##### 在6.0 之前 安裝`npm install -D husky` 之后 只需要在package.json 中去配置對應`git hook` 生命周期觸發的鉤子即可 ~~~ { "husky": { "hooks": { "pre-commit": "npm run test", // 在commit之前先執行npm run test命令 "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校驗commit時添加的備注信息是否符合我們要求的規范 } } } ~~~ >[danger] ##### 6.0 之后 已經不用在`package.json` 中去生成文件，而是`npm install -D husky`,在執行`npx husky install` 會幫我們創建`.husky` 文件并不會幫助創建`git hook`鉤子配置文件，執行`npx husky-init` 會創建`.husky` 文件并幫創建`pre-commit` 鉤子但此時鉤子執行腳本為`npm test`,想直接一步到位需要使用`npx husky install` 然后執行`npx husky add .husky/pre-commit "npm test"` 其中`npm test` 是觸發鉤子時候要執行的腳本 1. 安裝`npm install -D husky` 2. 執行`npx husky install` 生成`.husky` 文件 3. 指定鉤子對應執行腳本`npx husky add .husky/pre-commit "npm test"` 有時候會看見說需要執行`npm set-script prepare "husky install"` 只是 `npm7.x ` 支持的命令，如果你是`7.x` 之前的版本你可以直接在`packgae.json`中添加`prepare`腳本 ~~~json { "scripts": { "prepare": "husky install" } } ~~~ prepare腳本會在`npm install`（不帶參數）之后自動執行。也就是說當我們執行npm install安裝完項目依賴后會執行`husky install`命令，該命令會創建.husky/目錄并指定該目錄為git hooks所在的目錄。 >[danger] ##### 6.0 前后的具體改造 [husky使用總結 ](https://zhuanlan.zhihu.com/p/366786798) >[info] ## 使用lint-staged `lint-staged`是一個對git暫存區代碼進行格式化的工具，雖然剛才使用了`husky` 做了`git hook` 鉤子觸發時會觸發的對應腳本配置，但是往往這類腳本是全局的例如`npx husky add .husky/pre-commit "npm run prettier"` 我這里配置是格式化所有文件，其實相對來說往往只需要格式化的是**暫存區** 中的文件即可 ~~~ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "prettier": "prettier --write .", "prepare": "husky install", "commit": "cz" }, ~~~ 1. 安裝 `npm install lint-staged --save-dev` 2. 在package.json配置,lint-stagedv10.0.0以后 下面可以不在添加`git add` ~~~ // change 1: 配置lint-staged指令 "scripts": { // 新增這一行 "lint-staged": "lint-staged", ... }, // change 2: 配置lint-staged的具體任務 "lint-staged": { "*.{js,ts,vue,jsx,tsx}": [ "prettier --write", "eslint --cache --fix", "git add" ] }, ~~~ 3. 相對應的觸發鉤子配置 `npx husky add .husky/pre-commit 'npm run lint-staged'` >[danger] 整體流程 >當我們進行一次git提交時 => 觸發husky配置的pre-commit鉤子 => 執行`npm run lint-staged`命令 => 觸發lint-staged對暫存區的文件進行格式化（使用package.json中配置的lint-staged任務） => 使用prettier + eslint 進行格式化 >[info] ## 代碼提交規范 -- Commitizen 在提交代碼時候希望可以按照規范寫好提交信息備注可以使用 1. `npm install commitizen -D` 2. 安裝cz-conventional-changelog，并且初始化cz-conventional-changelog`npx commitizen init cz-conventional-changelog --save-dev --save-exact` 執行后會幫我們在package.json中進行配置 ~~~ "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } } ~~~ `git hook` 鉤子中對信息檢查的鉤子，配置`husky`,`npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'` 暫時不看 >[success] # 備注一下 https://godbasin.github.io/2019/11/10/change-log/ >[info] ## 文章參考 [內容非常詳細！領略Eslint代碼檢查的四種姿勢](https://developer.51cto.com/art/202103/650933.htm) [增加鉤子鏈接](https://juejin.cn/post/7041768022284976165#heading-10) 后續https://zhuanlan.zhihu.com/p/76697446