约束你的git操做，让你生无可恋。

用Node构建工具来约束你的git操做，让你生无可恋。

1、前言

  今天看到小伙伴写的《你可能会忽略的git提交规范》，不由想起本身那些不忍直视的提交信息，固然也不能怪本身，谁叫我可以随意的commit呢?上述文章中已经介绍了一些相关的工具以及规范，这里我再补充一些操做，如下内容算是一个简单的教程吧。

2、ESLint

  既然要规范起来，固然要从最基本的JS代码规范开始，这里咱们选择eslint做为代码规范检测工具。

一、安装ESLint

cnpm i -g eslint
复制代码

二、设置配置文件

  在根目录下建立.eslintrc.js文件，里面的配置比较的多，对于不一样环境的配置也不太同样，能够查看官网文档，这里咱们就简单配置一下普通JS文件的检测：

module.exports = {
      extends: 'eslint:recommended',
      env: {
        browser: true,
        node: true,
        commonjs: true,
        es6: true,
        mocha: true
      },
      root: true,
      rules: {
        'no-console': 'off'
      }
    }
复制代码

三、验证代码质量与规范

  咱们能够建立一个app.js文件，输入一些内容，而后经过如下命令执行验证：

eslint app.js 
复制代码

  若是你的代码不符合要求，那么控制台并会提示你哪些地方存在问题。

  其实对于eslint你们再熟悉不过了，各类项目的脚手架工具里都经过webpack集成了它的功能，因此当你在执行npm run dev，若是代码不符合eslint的规范，你是不可以完成dev构建的。

  可是有时候吧，烦不了，直接git add保存一下再说。如今我知道，这并非一个好习惯，因此要改。

3、Husky和lint-staged

  对的，你没看错，是Husky（哈士奇）。正如Husky官方文档中所说，

Git hooks made easy

  对于这个hook这个词类比一下Vue中的生命周期，你就知道咋回事了。因此接下来，咱们只须要经过这个库，就能够在git add 以前作一些不可描述的事了（因此你再仔细回味一下这个名字，是否是很皮）。

  有了这个还不够，咱们还须要lint-staged，它的做用文档中描述的也很清楚:

Run linters on git staged files

一、安装依赖

cnpm i -D husky@next lint-staged
复制代码

二、配置package.json

"lint-staged": {
      "*.js": [
        "eslint"
      ]
    },
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
    }
复制代码

  接下来，不再能那么随意的执行git的add操做了。

4、validate-commit-msg

  对于这个库的使用，前面所说的文章中已经介绍的很详细了，包括提供的一些Angular commit规范的参考文章。这里咱们一样须要在husky中配置一下：

"husky": {
      "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "validate-commit-msg"
      }
    }
复制代码

  到这里基本上一个小型的代码规范化提交工做流程完成了。

5、生成日志

  固然，你若是看过一些开源项目，在他们的项目中都有一个CHNAGELOG.md文件，这个文件主要是用来记录项目更新迭代的信息。这里咱们能够采用conventional-changelog来生成日志文件:

一、安装依赖

cnpm i -D conventional-changelog
    cnpm i -g conventional-changelog-cli
复制代码

二、配置package.json

"scripts": {
      "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
      "addChangelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
    }
复制代码

  接下来你能够经过npm run changelog生成完整的日志，前提是你的提交要符合Angular Commit标准。

6、写在结尾

  这里只是简单的介绍了两种强制验证的状况，实际上咱们也能够在pre-commit中加入csslint，固然确定还有更多的例子，欢迎小伙伴们分享本身的惨痛经历。

---

    喜欢本文的小伙伴们,欢迎关注个人订阅号超爱敲代码,查看更多内容.