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

目标

在项目中,添加代码提交到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']
}

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

添加husky

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

// .husky.json

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

你可能感兴趣的:(git,前端,javascript,vue.js)