提交代码前对提交内容进行校验

目标

在项目中，添加代码提交到git仓库前的eslint的检查和对git commit message的检查。

背景

• 具体的eslint规则参考之前写过的一篇博文
• 目前项目主要借鉴业内使用最为广泛的 Angular Message 规范
• 由于项目体积比较庞大，代码检查时只需要检查有变更代码的文件

安装依赖

npm install husky lint-staged @commitlint/cli @commitlint/config-conventional -D

添加commitlint

commitlint方便对git commit message进行检查，另外对于Angular Message 规范可以参考阮老师的Commit message 和 Change log 编写指南

// commitlint.config.js

// 添加git提交的检查提交的信息
module.exports = {
     
  extends: ['@commitlint/config-conventional'],
  rules: {
     
    // 提交的前缀
    // feat：新功能（feature）
    // fix：修补 bug
    // docs：文档（README、Change Log 等）
    // style： 格式，仅代码格式，不是 CSS 样式
    // refactor：重构（即不是新增功能，也不是修改 Bug 的代码变动）
    // test：增加测试
    // chore：构建过程或辅助工具的变动，例如构建脚本、Dockerfile、package.json 的改动
    'type-enum': [2, 'always', [
      'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'
    ]],
    '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]
  }
}

添加lint-staged

lint-staged 只会对当前git提交的代码进行检查

// lint-staged.config.js

// 对在git暂存区的文件进行过滤后再进行相关的操作
module.exports = {
     
  'src/**/*.js': ['eslint --fix', 'git add'],
  'src/**/*.vue': ['eslint --fix', 'git add']
}

这里只是对js与vue文件进行检查，另外还可添加stylelint等来对代码进行样式方面进行检查。

添加husky

husky 提供方便的git的hook，git commit, git push等以防止不合规范代码的提交

// .husky.json

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