1、前言

寫(xiě)好git commit提交有什么好處呢？

查看提交的log也非常的優(yōu)雅，這個(gè)就不多提了

方便查找日志記錄，通過(guò)簡(jiǎn)單的過(guò)濾便能定位到具體想要查找的log

方便問(wèn)題回溯，通過(guò)git log就能查找到當(dāng)時(shí)提交的代碼文件，以及修改的代碼

其實(shí)如果使用過(guò)github的release, 可以直接根據(jù)feat和fix來(lái)過(guò)濾提取日志發(fā)布版本

接下來(lái)我就來(lái)實(shí)踐一下，首先我這里使用的是pnpm安裝依賴(lài)的。今天主要是在提交代碼時(shí)稍微自動(dòng)化一點(diǎn)，并且讓提交規(guī)范統(tǒng)一一些。

具體操作的源碼項(xiàng)目github.com/aehyok/taro…[1]

2、commitizen插件

pnpmicommitizen-D

此時(shí)我們先git add .,然后就可以使用一下git cz,所以現(xiàn)在可以直接在package.json中添加一個(gè)scripts

//&&代表`gitadd.和`gitcz`兩個(gè)指令串行執(zhí)行，
//先執(zhí)行前一個(gè)，執(zhí)行完后再執(zhí)行后一個(gè)
"git":"gitadd.&&gitcz"

那么接下來(lái)直接執(zhí)行 pnpm git

輸入commit的提交信息，保存，關(guān)閉小窗，因?yàn)槲疫@里用的是gitExtensions圖形操作程序，隨后git push提交即可，但是這樣其實(shí)只是換了一個(gè)命令而已，并沒(méi)有什么實(shí)質(zhì)性的改變。那接下來(lái)就讓它改變一下吧

3、cz-customizable設(shè)置提交模板

pnpmicz-customizable-D

安裝完之后在package.json中添加如下節(jié)點(diǎn)

"config":{
"commitizen":{
"path":"node_modules/cz-customizable"
}
},

同時(shí)可以再根目錄創(chuàng)建.cz-config.js，這里有一份官網(wǎng)提供的模板github.com/leoforfree/…[2]

下面這個(gè)是我自己修改后的提交模板

module.exports = {
  // type 類(lèi)型（定義之后，可通過(guò)上下鍵選擇）
  types: [
    { value: 'feat', name: 'feat:     新增功能' },
    { value: 'fix', name: 'fix:      修復(fù) bug' },
    { value: 'docs', name: 'docs:     文檔變更' },
    {
      value: 'style',
      name: 'style:    代碼格式（不影響功能，例如空格、分號(hào)等格式修正）'
    },
    {
      value: 'refactor',
      name: 'refactor: 代碼重構(gòu)（不包括 bug 修復(fù)、功能新增）'
    },
    { value: 'perf', name: 'perf:     性能優(yōu)化' },
    { value: 'chore', name: 'chore:     其他修改, 比如構(gòu)建流程, 依賴(lài)管理、版本好修正.' }
  ],

  // scope 類(lèi)型（定義之后，可通過(guò)上下鍵選擇）
  scopes: [
    ['components', '組件相關(guān)'],
    ['hooks', 'hook 相關(guān)'],
    ['utils', 'utils 相關(guān)'],
    ['element-ui', '對(duì) element-ui 的調(diào)整'],
    ['styles', '樣式相關(guān)'],
    ['deps', '項(xiàng)目依賴(lài)'],
    ['auth', '對(duì) auth 修改'],
    ['other', '其他修改'],
    // 如果選擇 custom，后面會(huì)讓你再輸入一個(gè)自定義的 scope。也可以不設(shè)置此項(xiàng)，把后面的 allowCustomScopes 設(shè)置為 true
    ['custom', '以上都不是？我要自定義']
  ].map(([value, description]) => {
    return {
      value,
      name: `${value.padEnd(30)} (${description})`
    }
  }),

  // 是否允許自定義填寫(xiě) scope，在 scope 選擇的時(shí)候，會(huì)有 empty 和 custom 可以選擇。
  // allowCustomScopes: true,

  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\d{1,5}',

  // 針對(duì)每一個(gè) type 去定義對(duì)應(yīng)的 scopes，例如 fix
  /*
    scopeOverrides: {
      fix: [
        { name: 'merge' },
        { name: 'style' },
        { name: 'e2eTest' },
        { name: 'unitTest' }
      ]
    },
    */

  // 交互提示信息
  messages: {
    type: '確保本次提交遵循：前端代碼規(guī)范！
選擇你要提交的類(lèi)型：',
    scope: '
選擇一個(gè) scope（可選）：',
    // 選擇 scope: custom 時(shí)會(huì)出下面的提示
    customScope: '請(qǐng)輸入自定義的 scope：',
    subject: '填寫(xiě)簡(jiǎn)短精煉的變更描述：
',
    body: '填寫(xiě)更加詳細(xì)的變更描述（可選）。使用 "|" 換行：
',
    breaking: '列舉非兼容性重大的變更（可選）：
',
    footer: '列舉出所有變更的 ISSUES CLOSED（可選）。例如: #31, #34：
',
    confirmCommit: '確認(rèn)提交？'
  },

  // 設(shè)置只有 type 選擇了 feat 或 fix，才詢(xún)問(wèn) breaking message
  allowBreakingChanges: ['feat', 'fix'],

  // 跳過(guò)要詢(xún)問(wèn)的步驟
  skipQuestions: ['scope', 'body', 'breaking', 'footer'],

  subjectLimit: 100, // subject 限制長(zhǎng)度
  breaklineChar: '|' // 換行符，支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
}

運(yùn)行 pnpm git

根據(jù)指引提示，然后輸入提交信息，推送到服務(wù)器就完成了，查看git log可以發(fā)現(xiàn)

4、總結(jié)

其實(shí)還可以將腳本修改一下

"git":"gitadd.&&gitcz&&gitpush"

這樣三個(gè)指令會(huì)串行執(zhí)行，一個(gè)接著一個(gè)執(zhí)行，如果提交沒(méi)什么問(wèn)題的話(huà)，很自然就推送到遠(yuǎn)端了。

審核編輯：湯梓紅