前端項目中git規範化提交方案

團隊項目中，通常咱們會統一代碼提交規範。這裏簡單介紹下使用git鉤子插件來規範化提交代碼。

1. 簡介

在git中，每次執行git commit, git push等操做時，會觸發一個或多個shell腳本，這些腳本稱爲鉤子，存放在 .git/hooks 目錄下。鉤子分爲前置鉤子和後置鉤子，前置鉤子爲git命令調用前執行，後置鉤子爲git命令完成後執行。

因此在git命令提交時，咱們能夠額外作一些事情，好比提交前的代碼檢測，提交後的部署等功能。下面咱們藉助插件來實現代碼提交前的commit信息校驗，代碼格式化，代碼檢測等功能。

2. 步驟

2.1 安裝插件

首先安裝husky, pretty-quick，lint-staged，commitlint， eslint插件。

cnpm i husky pretty-quick lint-staged commitlint eslint --save-dev
複製代碼

• husky: 在 .git/hooks 中寫入 pre-commit 等腳本激活鉤子，在 Git 操做時觸發
• pretty-quick：代碼格式化
• lint-staged：每次提交時只檢查本次提交的暫存區的文件
• commitlint：對git每次提交的commit信息作格式校驗
• eslint: 代碼質量檢測

2.2 修改package.json

修改package.json配置，設置lint-staged和husky。

"lint-staged": {
    "linters": {
      "**/*.{js,vue}": [
        "eslint --fix",
        "git add"
      ]
    }
  }
複製代碼

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
複製代碼

• 安裝husky後在.git/hooks裏寫入pre-commit鉤子，git commit提交以前執行 pretty-quick --staged && lint-staged 命令。
• pretty-quick 對提交的文件進行格式化，須要配置prettier.config.js。
• lint-staged 參考package.json裏lint-staged的設置，利用linters對暫存區的文件路徑應用過濾規則，匹配的文件執行後面配置的任務，這裏是執行eslint代碼檢測，把沒有問題的代碼執行git add命令放入暫存區。
• 第二個是對提交信息作格式校驗，commitlint -E HUSKY_GIT_PARAMS，須要配置commitlint.config.js文件。
• 若是任務執行過程當中有報錯，就退出，不執行代碼commit提交。

2.3 添加配置文件

下面的配置文件僅供參考。

// prettier.config.js
module.exports = {
  printWidth: 120, //一行的字符數，若是超過會進行換行，默認爲80
  tabWidth: 2, //一個tab表明幾個空格數，默認爲80
  useTabs: false, //是否使用tab進行縮進，默認爲false，表示用空格進行縮減
  singleQuote: true, //字符串是否使用單引號，默認爲false，使用雙引號
  semi: true, //行位是否使用分號，默認爲true
};
複製代碼

// commitlint.config.js
module.exports = {
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'build',
        'ci',
        'chore',
        'merge',
        'docs',
        'feat',
        'fix',
        'test'
      ]
    ],
    'body-leading-blank': [1, 'always'],
    'footer-leading-blank': [1, 'always'],
  }
};
複製代碼

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    quotes: [1, 'single'],
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};
複製代碼

參考地址： www.jianshu.com/p/dc55ddd6c…