代碼檢測規范和git提交規范

摘要：之前開發的項目，代碼檢測和提交規范都是已經配置好的，最近自己新建的項目就記錄下相關配置過程。

1. ESlint配置

????????2013年6月創建開源項目，提供一個插件化的JavaScript代碼檢測工具，創建項目是生成的eslintrc.js文件；

//Eslint配置文件遵循commonJS的導出規則，所導出的的對象就是ESLint的配置對象

//官方文檔：https://www.tkcnn.com/eslint/core-concepts.html

// Eslint配置文件遵循commonJS的導出規則，所導出的的對象就是ESLint通的配置對象
// 文檔：https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {// 表示當前目錄即為根目錄，ESLint規則將被限制到該目錄下root: true,// env表示啟用ESLint檢測的環境env: {// node環境下啟動ESLint檢測node: true},// ESLint中基礎配置需要繼承的配置；extends: ['plugin:vue/vue3-essential','@vue/standard'],// 解析器:表述需要解析的內容parserOptions: {parser: 'babel-eslint'},// rules中需要修改的啟用規則（key表示啟用的規則）及其各自的錯誤級別/*** 錯誤級別分為三中：* "off"或者0 - 關閉規則* "warn"或者1 - 開啟規則，使用警告級別的錯誤：warn （不會導致程序退出）* "error"或者2 - 開啟規則，使用錯誤界別的錯誤：error（當被觸發的時候，程序會退出）*/rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren': 'off'   //關閉此規則}
}

2. Prettier配置

? ? ? ? Prettier是代碼格式化工具，具有開箱即用、直接集成到vscode的特點。保存時，讓代碼直接符合ESLint，prettier配置步驟如下：

vscode安裝prettier可以在配置prettierrc時獲得一些提示；
根目錄新增prettierrc文件，配置的JSON內容如下：

{//semi：表示js語句結尾是否尾隨分號；"semi": false,//singleQuote：表示是否用單引號代替所有雙引號；"singleQuote": true,//trailingComma:表示多行語法中，是否需要再最后一行添加逗號，有all\es5\none三個值；"trailingComma": "none"
}

注：也可以使用這樣的配置

module.exports = {eslintIntegration: true,printWidth: 160, // 指定代碼長度，超出換行tabWidth: 2, // tab 鍵的寬度useTabs: false, // 不使用tabsemi: true, // 結尾加上分號singleQuote: true, // 使用單引號quoteProps: 'as-needed', // 要求對象字面量屬性是否使用引號包裹trailingComma: 'none', // 確保對象的最后一個屬性后有逗號bracketSpacing: true, // 大括號有空格 { name: 'rose' }arrowParens: 'always', // 箭頭函數，單個參數添加括號requirePragma: false, // 是否嚴格按照文件頂部的特殊注釋格式化代碼insertPragma: false, // 是否在格式化的文件頂部插入Pragma標記，以表明該文件被prettier格式化過了proseWrap: 'preserve', // 按照文件原樣折行htmlWhitespaceSensitivity: 'ignore', // html文件的空格敏感度，控制空格是否影響布局endOfLine: 'auto' // 結尾是 \n \r \n\r auto
};

vscode的設置中找到save，勾選Format on save;

????????綜上實現保存后，自動格式化代碼的目的。此外，還需要處理幾處細節

vscode→首選項→設置→搜Tab Size設置制表符為兩個空格2
如果vscode安裝了多個代碼格式化工具，可以右鍵選中『使用...格式化文檔』配置默認的格式化程序
ESLint和prettier之間沖突：space-before-function-paren;在ESLInt的rules中配置關閉：

'space-before-function-paren': 'off'

3. Git提交規范

????????Angular團隊Conventional Commits specification約定式提交，規范鏈接（約定式提交）。提交說明的結構如下所示

<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
譯文：
<類型>[可選 范圍]: <描述>
[可選 正文]
[可選 腳注]

3.1 Commitizen

????????使用Commitizen進行代碼提交（git commit）時，commitizen會再提交時填寫所必須提交的字段；

1.全局安裝Commitizen（建議使用有管理員權限的終端）

sudo npm install -g commitizen@4.2.4

2.安裝配置cz-customizable插件

????????1.使用npm下載cz-customizable

npm i cz-customizable@6.3.0 --save-dev

????????2.添加下列配置再package.json中

...
"config": {"commitizen": {"path": "node_modules/cz-customizable"   //commitizen的自定義配置的安裝位置}
}

3.根目錄下創建.cz-config.js自定義提示文件

module.exports = {//可選類型types: [{ value: 'feat', name: 'feat: 新功能' },{ value: 'fix', name: 'fix: 修復' },{ value: 'docs', name: 'docs: 文檔變更' },{ value: 'style', name: 'style: 代碼格式（不影響代碼運行的變動）' },{ value: 'refactor', name: '重構（即不增加feature，也不修復bug）' },{ value: 'perf', name: 'perf: 性能優化' },{ value: 'test', name: 'test: 增加測試' },{ value: 'chore', name: 'chore: 構建過程或輔助工具的變動' },{ value: 'revert', name: 'revert: 回退' },{ value: 'build', name: 'build: 打包' }],//消息步驟messages: {type: '請選擇提交的類型：',customScope: '請輸入修改范圍（可選）',subject: '請簡要描述提交（必填）',body: '請輸入詳細描述（可選）',footer: '請輸入要關閉的issue（可選）',confirmCommit: '確認要使用以上信息提交？ (y/n)'},//跳過問題skipQuestions: ['body', 'footer'],//subject文字默認長度是72subjectLimit: 72
}

4. 使用git cz代替git commit。使用git cz代替git commit即可看到上述提示內容

czh12@czh12deiMac vue-admin % **git add .**
czh12@czh12deiMac vue-admin % **git cz**
cz-cli@4.2.4, cz-customizable@6.3.0All lines except first will be wrapped after 100 characters.
? 請選擇提交的類型： feat: 新功能
? 請輸入修改范圍（可選） git
? 請簡要描述提交（必填） add commitizen
? 請輸入詳細描述（可選） 使用commitizen提交代碼
? 請輸入要關閉的issue（可選） ###--------------------------------------------------------###
feat(git): add commitizen使用commitizen提交代碼
###--------------------------------------------------------###? 確認要使用以上信息提交？ (y/n) Yes> running pre-commit hook: lint-staged↓ Stashing changes... [skipped]→ No partially staged files found...? Running tasks...
[master 5904db7] feat(git): add commitizen3 files changed, 512 insertions(+), 7 deletions(-)create mode 100644 .cz-config.js
chenzh12@chenzh12deiMac vue-admin % **git log**
commit 5904db74cd7128e4957dbcdcd45d33033cb4bdca (HEAD -> master)
Author: zhenghuachen <zhchenanhui@163.com>
Date:   Tue Oct 31 18:00:15 2023 +0800feat(git): add commitizen使用commitizen提交代碼

3.2 Git Hooks

????????上節完成了Commitizen提交的配置，但是需要使用git cz替換git commit才能實現，如果不使用git cz上述提交規范就沒有預約效果。本節實現不符合約定式提交規范時，阻止當前提交，并拋出錯誤提示。

????????本節實現的功能需要借助Git hooks，它是是一種在提交代碼之前或之后執行特定操作的技術。本節主要借助一下兩種鉤子：


Git Hooks	調用時機	說明
pre-commit	git commit執行前他不接受任何參數，并且在獲取提交日志消息并進行提交之前被調用。腳本git commit以非零狀態退出會導致命令在創建提交之前停止。	可以使用 git commit —no-verify繞過
commit-msg	git commit執行前、可以用于將消息規范為魔種項目標準格式。還可以用于在檢查消息文件后拒絕提交	可以使用 git commit —no-verify繞過

簡單來說：

commit-msg：可以用來貴干化標準格式，并且可以按需指定是否要拒絕本次提交；

pre-commit：會在提交前被調用，并且可以按需指定是否要拒絕本次提交。

使用git hooks校驗提交信息需要使用到如下工具：

commitlint：用于檢查提交信息（https://github.com/conventional-changelog/commitlint）

husky：是git hooks工具（https://github.com/typicode/husky）

注：需要保證npm版本是7.X以上

3.2.1 commitlint安裝

1. 安裝依賴

npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4

2.?創建commitlint.config.js文件。可以直接執行下面代碼

echo "module.exports = {extends: ['@commitlint/config-conventional]'}" >
commitlint.config.js

????????也可以手動新建commitlint.config.js并輸入,表示導出的對象繼承了這個第三方的包

module.exports = {extends: ['@commitlint/config-conventional']
}

3.?打開commitlint.config.js, 增加配置項

module.exports = {// 繼承的規則extends: ['@commitlint/config-conventional'],// 定義規則roles: {// type 的類型定義: 表示git提交的type必須再以下類型范圍'type-enum': [// 當前驗證的錯誤級別，2表示錯誤2,// 在什么情況下進行驗證'always',// 泛型內容['feat', // 'feat: 新功能''fix', // 'fix: 修復''docs', // 'docs: 文檔變更''style', // 'style: 代碼格式（不影響代碼運行的變動）''refactor', // '重構（即不增加feature，也不修復bug）''perf', // 'perf: 性能優化''test', // 'test: 增加測試''chore', // 'chore: 構建過程或輔助工具的變動''revert', // 'revert: 回退''build' // 'build: 打包']],// subject 大小寫不做校驗'subject-case': [0]}
}

3.2.2 husky安裝

1. 安裝依賴：npx husky install

czh12@czh12deiMac vue-admin % npx husky install
husky - Git hooks installed

2.?啟動hooks，生成.husky文件夾：npx husky install

czh12@czh12deiMac vue-admin % npx husky install
husky - Git hooks installed

3.?再package.json中生成prepare指令（需要npm>7.0）

????????可以手動添加，也可以通過如下指令生成

npm set-script prepare "husky install"

4.?執行prepare指令：npm run prepare

czh12@czh12deiMac vue-admin % npm run prepare> vue-admin@0.1.0 prepare
> husky installhusky - Git hooks installed

5.?添加commitlint的hooks到husky中，并指令在commit-msg的hooks下執行npx —no-install commitlint —edit "$1"指令

????????通過husky監聽git hooks，在git hooks的commit-msg的回調的hooks里面執行commitlint來完成對應的提交代碼的檢測

czh12@czh12deiMac vue-admin % npx husky add .husky/commit-msg 'npx --no-installcommitlint --edit "$1"'
husky - created .husky/commit-msg

????????此時的.husky文件結構

????????此時，不符合規范的提交將會被阻止

czh12@czh12deiMac vue-admin % git add .     
czh12@czh12deiMac vue-admin % git commit -m 'test'
?   input: test
?   subject may not be empty [subject-empty]
?   type may not be empty [type-empty]?   found 2 problems, 0 warnings
?   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlinthusky - commit-msg hook exited with code 1 (error)

????????綜上，代碼強制規范化提交要求以配置完成，不符合提交規范的代碼將無法提交。

3.3 通過pre-commit檢測提交時代碼規范

????????ESLint和Prettier解決了本地代碼格式問題，那么如果本地沒有配置，提交時如何規避這種問題？這就需要使用husky和ESLint配合才可以。通過husky檢測pre-commit鉤子，在該鉤子執行npx eslint —ext .js,.vue src（src目錄下檢測.js和.vue的文件）指令進行相關代碼格式化規范檢測：

1. 執行npx husky add .husky/pre-commit "npx eslint —ext .js,.vue src"添加commit時（npx eslint —ext .js,.vue src 會在執行到該hooks是運行）

2. 執行上述命令，會在.husky文件夾中生成pre-commit文件，其內容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"npx eslint --ext .js,.vue src

3.4 通過lint-staged自動修復格式錯誤

????????上節通過pre-commit處理了檢測代碼提交規范的問題，但是有兩處需要優化。

????????首先，若只修改個別文件，沒必要檢測所有文件的代碼格式；

????????其次，檢測出錯誤依然需要手動修改。

????????lint-staged可以讓代碼檢查值作用域本次修改的代碼，并自動修復并且推送。lint-staged的使用如下，修改package.json中lint-staged的配置為：

"lint-staged": {"src/**/* .(js,vue)": ["eslint --fix","git add"]
},

????????如上配置，會在本地commit前校驗提交代碼是否符合ESLint規范，符合則提交，不符合則嘗試修復，修復成功則提交，失敗則提示。

????????同時還要修改pre-commit中的內容，使其使用lint-staged檢測提交

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"npx lint-staged

????????綜上，git提交規范配置完成。總結一下：

????????代碼格式規范，通過ESLint+Prettier+VSCode配合進行了處理，達到了保存代碼，自動格式化代碼格式的目的。git提交規范使用了husky來檢測Git hooks鉤子，并通過以下插件完成配置：

約定式提交規范

commitizen：git提交規范化工具

commitlint：用于檢測提交信息

pre-commit: git hooks 鉤子

lint-staged：只檢測本次修改更新后的代碼，并將出現的錯誤自動修復并推送。