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

1 規(guī)范化

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

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

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

const a=b+c

const fn=()=>{}

fn(){}

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

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

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

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

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

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

2 git 提交規(guī)范

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

2.1 Angular 規(guī)范

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

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

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

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

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

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

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

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

2.2 Commitizen

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

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

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

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

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

3 git hooks

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

3.1 什么是 git hooks

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

1.pre-commit

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

2.commit-msg

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

3.2 commitlint 和 husky

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

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

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

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

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

3.初始化 husky

npx husky install

執(zhí)行完成后，項(xiàng)目根目錄會(huì)自動(dòng)生成一個(gè) .husky 文件夾。

3.3 pre-commit 和 commit-msg 鉤子

接下來需要使用 lint-staged 對git 暫存區(qū)（git add . 的內(nèi)容）文件進(jìn)行 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í)行完該命令后，會(huì)自動(dòng)在 .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 測試

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

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

控制臺(tái)會(huì)出現(xiàn)如下錯(cuò)誤提示：

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

各位還可以弄點(diǎn) eslint 錯(cuò)誤再提交試試效果。

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

最新評論