約束你的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，固然確定還有更多的例子，歡迎小夥伴們分享本身的慘痛經歷。

---

    喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.