前端提交规范

一、使用husky & lint-staged

husky 是控制代码提交的钩子，在代码被提交到Git仓库之前，我们可以在这里做一些预检查或者格式化工作。
lint-staged是一个前端文件过滤的工具（仅仅是文件过滤器），可以对文件系统进行过滤，使得每次提交不必对所有文件进行校验

1. 安装husky 和 lint-staged

npm install husky lint-staged -D

2. 修改 package.json，增加配置：

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{ts,vue}": [
      "eslint --fix", "git add"
    ]
  }

上面配置，每次它只会在你本地 commit 之前，校验你提交的内容是否符合你本地配置的 eslint规则，如果符合规则，则会提交成功。如果不符合它会自动执行 eslint —fix 尝试帮你自动修复，如果修复成功则会帮你把修复好的代码提交，如果失败，则会提示你错误，让你修好这个错误之后才能允许你提交代码。

拓展：除了在package.json中配置，也可以在.lintstagedrc、lint-staged.config.js 文件中，lint-staged 的常用选项除了liners 之外，还有 ignore 、concurrent 等，具体参考文档：

{
  "lint-staged": {
    "linters": {
      "*.{js,scss}": ["some command", "git add"]
    },
    "ignore": ["**/dist/*.min.js"]
  }
}

二、使用 Commitlint

Commitlint 可以对代码提交的信息进行规范和校验，方便团队协作和快速定位问题

1. 安装

npm install --save-dev @commitlint/config-conventional @commitlint/cli

// 生成配置文件commitlint.config.js，当然也可以是 .commitlintrc.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

2. 配置

在husky的配置加入CommitlIint配置，==”commit-msg": "commitlint -e $HUSKY_GIT_PARAMS”==

  husky: {
    hooks: {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },

3. 定制提交规范

常用的type类别

build: 影响构建系统或外部依赖关系的更改（示例范围：gulp、broccoli、npm）
ci: 对ci配置文件和脚本的更改（示例范围：Circle、BrowserStack、SauceLabs）
docs: 仅文档更改
feat: 新功能（feature）
fix: 修补bug
perf: 提高性能的代码更改
refactor: 重构（既不修复错误也不添加功能的代码更改）
style: 样式修改，不影响代码含义的更改
test: 增加测试

例如：

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'fix: 修复 xxx 功能'

Subject

Subject是 commit 目的的简短描述，可以做一些配置，如最大长度限制。

commitlint.config.js文件配置

rule配置说明 : rule由name和配置数组组成，如：’name:[0, ‘always’, 72]’，数组中第一位为level，可选0,1,2，0为disable，1为warning，2为error，第二位为应用与否，可选always|never，第三位该rule的值。具体配置例子如下：

module.exports = {
  extends: [
    '@commitlint/config-conventional',
  ],
  rules: {
    'type-enum': [2, 'always', [
      'build', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'style', 'revert',
    ]],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}