發(fā)展不斷融入很多后端思想，形成前端的“四個現(xiàn)代化”：工程化、模塊化、規(guī)范化、流程化。在該系列文章中已詳細介紹了模塊化的發(fā)展及四種模塊化規(guī)范。本文簡單聊聊規(guī)范化中的 git 規(guī)范。

1 規(guī)范化

在企業(yè)級開發(fā)中，“一千個讀者有一千個哈姆雷特”是很常見的事，每個程序員對技術(shù)的理解、視角和掌握程度參差不齊，導致編寫的代碼五花八門。規(guī)范化包括很多，我在企業(yè)實踐中重點關(guān)注兩個方面：代碼規(guī)范 和 git 提交規(guī)范。

代碼規(guī)范最基礎(chǔ)的是代碼格式，不同的代碼格式雖然運行起來沒有問題，但代碼超級難看，代碼亂七八糟、一堆 warning，雖然不影響運行，但看著太惡心，就像下面的情形：

• 估計是為了節(jié)省紙張，空格全省略，代碼全擠在一起

const a=b+c

const fn=()=>{}

fn(){}

for(let i=0; i<10; i++){}

• 單引號、雙引號混合使用，上一行用單引號，下一行偏要用雙引號；
• 上一行加分號，后一行省略分號；
• 定義了一些從沒有使用的變量；
• 分支判斷中只有一句話堅決不寫花括號；
• ......

我不能說上面的風格是錯誤的（寫代碼就像玩音樂一樣，不能說絕對的對錯，只是理解不同罷了），無論怎么寫，至少一個團隊還是應該保證統(tǒng)一的風格吧。于是咱們就使用了 .editorconfig 和 eslint。

.editorconfig 對編輯器的基本格式做了限制，但比較粗糙；eslint 就進行了詳細的約束。無論選擇 standard 、airbnb、prettier 任何一種，都是為了強制團隊使用統(tǒng)一的代碼風格。

在 《創(chuàng)建 vite vue3 項目》一文中已討論了如何在基于 vite 的 vue3 項目中如何整合 eslint。

本文重點討論 git 提交規(guī)范。

2 git 提交規(guī)范

大家應該都是使用 git 管理代碼吧？如果你在企業(yè)還是使用 SVN 管理代碼，那可以趕快跑路了。git 提交代碼使用 git commit -m '描述' 命令。但描述信息很多情況下都是隨意填寫，git 提交規(guī)范就是針對這個描述信息的約束。

2.1 Angular 規(guī)范

Angular 團隊規(guī)范是目前使用較多的 git 提交規(guī)范 —— 約定式提交。規(guī)范要求提交的描述信息格式為：

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

含有 optional 表示可選，故必填的內(nèi)容是 type 和 description。

type 表示這次提交的類型，包括如下值：

例如，實現(xiàn)了一個修改用戶列表功能，此時提交代碼使用如下命令：

git commit -m 'feat: 實現(xiàn)用戶列表'

修改了 vite.config.ts 的配置，壓縮打包文件：

git commit -m 'chore: 修改vite生產(chǎn)配置'

2.2 Commitizen

確定了git 提交時描述信息的規(guī)范，那如何讓人遵守執(zhí)行呢？首先需要讓開發(fā)同事知道提交信息的內(nèi)容，此時可以使用工具 commitizen 來完成。commitizen 是一個 git 提交規(guī)范化的工具，提供了 git cz 命令來代替?zhèn)鹘y(tǒng)的 git commit 命令。使用 git cz 來提交代碼，commitizen 會一步步提示輸入的字段，并提交所填寫的必需字段。換句話說，使用 git cz 命令，底層最后會執(zhí)行 git commit，但在執(zhí)行 git commit 前，會校驗描述信息是否符合規(guī)范。如果不符合規(guī)范，則不會執(zhí)行 git commit，提交失敗。

1.全局安裝 commitizen

yarn global add commitizen

2.在工程中安裝 cz-conventional-changelog

yarn add cz-conventional-changelog -D

3.在工程中初始化 commitizen 的約定式提交：

commitizen init cz-conventional-changelog --yarn --dev --exact

執(zhí)行完該命令，package.json 文件中會自動生成如下配置：

"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

完成上述步驟后，便可以使用 git cz 命令來提交代碼了。

添加需要提交的文件，添加文件后執(zhí)行 git cz 命令，提示如下：

使用上下鍵選擇提交的類型，按照提示輸入相關(guān)內(nèi)容或必填內(nèi)容即可完成提交。

3 git hooks

上面實現(xiàn)了 Git 提交規(guī)范，但仍然有不聽話的同學會使用 git commit，如此一來提交信息依舊是亂七八糟的，此時便需要使用 git hooks 了。

3.1 什么是 git hooks

hooks 意思是“鉤子”，也就是在執(zhí)行某個操作之前或之后要做的事。git hooks 就是 git 操作的鉤子，在 git 執(zhí)行某個操作之前或之后要做的事，如 git 提交后、提交后、合并前、合并后、rebase前、rebase后等。在這里需要重點關(guān)注的 git 鉤子有兩個：

1.pre-commit

pre-commit 是 git commit 執(zhí)行前的鉤子，會在獲取提交描述信息且提交前被調(diào)用，根據(jù)該鉤子決定是否拒絕提交?？梢栽谶@個鉤子中對代碼進行 eslint 檢查。

2.commit-msg

commit-msg 也是 git commit 執(zhí)行前的鉤子，用來規(guī)范化標準格式，根據(jù)標準和提交的描述信息決定是否拒絕提交。可以在這個鉤子中檢查提價信息是否符合規(guī)范。

3.2 commitlint 和 husky

理解 git hooks 后，就是如何在工程中引入上述鉤子。此時需要使用到 husky 和 commitlint。兩者結(jié)合起來可以在提交的描述信息不規(guī)范時會導致提交失敗，并提示錯誤。首先安裝配置 commitlint。

1.安裝 husky 和 commitlink 相關(guān)依賴：

yarn add husky @commitlint/cli @commitlint/config-conventional -D

2.在項目根目錄創(chuàng)建 commitlint.config.cjs 配置文件：

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

3.初始化 husky

npx husky install

執(zhí)行完成后，項目根目錄會自動生成一個 .husky 文件夾。

3.3 pre-commit 和 commit-msg 鉤子

接下來需要使用 lint-staged 對git 暫存區(qū)（git add . 的內(nèi)容）文件進行 eslint 檢查。

1.安裝 lint-staged

yarn add lint-staged -D

2.在 package.json 中添加 scripts：

"scripts": {
  ...
  "lint": "eslint \"src/**/*.{js,ts,vue,jsx,tsx}\" --fix"
},

3.在 package.json 添加 lint-staged 配置：

{
	.....
  "lint-staged": {
    "*.{js,ts,jsx,tsx,vue}": [
      "npm run lint"
    ]
  }
}

4.分別執(zhí)行下列命令，為 husky 添加 commit 前的 hook，讓其執(zhí)行 eslint 和 commitlint ：

npx husky add .husky/pre-commit 'npx lint-staged'

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

執(zhí)行完該命令后，會自動在 .husky/ 目錄下生成 pre-commi 文件和 commit-msg 文件。

pre-commit 文件內(nèi)容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

commit-msg 文件內(nèi)容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit ""

3.4 測試

到此為止便完成了配置，可以按如下步驟進行測試：

git add .
git commit -m '測試提交'

控制臺會出現(xiàn)如下錯誤提示：

使用 git cz 命令重新提交，便可以成功提交。

各位還可以弄點 eslint 錯誤再提交試試效果。

到此這篇關(guān)于vite vue3 規(guī)范化與Git Hooks的文章就介紹到這了,更多相關(guān)vue3 Git Hooks內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論