前端项目中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…