摘要：為此我們需要安裝這個是用于提交代碼的鉤子函數安裝完之后，我們就需要在增加運行鉤子函數。等鉤子函數這樣就簡單的成功對代碼進行效驗了，當然這邊更進一步的可以使用這個可以將取得所有被提交的文件依次執行寫好的任務。

一個項目是會有多個成員來開發的，因此統一開發規范是很有必要的，不然每個人都有自己的風格，同步之后代碼都會報錯。
我這邊是用Vscode編譯器的。

首先用vue-cli3.0創建一個工程
其中選擇eslint+prettier類型，并且下載Vscode的插件eslint和prettier，這樣編譯器就會效驗規則了。
項目中會生成.eslintrc.js文件，該文件是用于配置eslint規則的

module.exports = {
  root: true,
  env: {
    mocha: true,
    es6: true,
    node: true,
    browser: true
  },
  parserOptions: {
    parser: "babel-eslint"
  },
  plugins: ["vue", "vue-i18nstring"], // 這邊主要增加vue,和vue-i18nstirng插件
  extends: ["plugin:vue/strongly-recommended", "@vue/prettier"], 
  rules: { // 這邊就是配置一些具體的規則，具體規則查看eslint，大部分不需要改，開發過程中發現問題了，覺得不合適，可以配置進來
    // 判斷代碼中是否存在中文 (這邊如果不需要多語言模塊，那么就不需要配置)
    "vue-i18nstring/no-chinese-character-vue": 1,
    "vue-i18nstring/no-chinese-character-js": 1,
    "vue/html-indent": 1,
    // 以下是去除console和debugger當然還有其他很多，如分號之類，根據風格就行修改
    "no-console": process.env.NODE_ENV === "production"
      ? 0
      : [
          "error",
          {
            allow: ["warn", "error"]
          }
        ],
    "no-debugger": process.env.NODE_ENV === "production"? 0 : 2
  },
  globals: {
    expect: true,
    sinon: true
  }
};

有了vscode插件和這個配置文件，那么就可以檢測代碼了。此外一般格式化風格也會有差異，這邊vscode支持.prettierrc文件來配置。
這樣所以這個項目的格式化風格就會一致了。

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "proseWrap": "never",
  "overrides": [ // 這邊是除去不需要檢測的文件
    {
      "files": [
        "*.json",
        ".eslintrc",
        ".babelrc",
        ".stylelintrc",
        ".prettierrc"
      ],
      "options": {
        "parser": "json",
        "tabWidth": 2
      }
    }
  ]
}

當然這邊僅僅做這個還是不夠的，為啥呢，因為有人可能會提交一些代碼還有錯誤的代碼。
因此這邊采用git倉庫。
首先全局安裝：npm install -g commitizen，這個工具是一個git提交的工具，可以做一些提交的檢測
然后commitizen init cz-customizable --save --save-exact，這樣就會自動在package.json增加

"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
  }

之后我們就可以使用git cz 來代替 git commit了，使用命令之后按給出的提出，給出相應的選擇。這些選中都是可以修改了（配置文件可參考node_modules/cz-customizable/cz-config-EXAMPLE.js）這邊給出一個demo，在根目錄下創建.cz-config.js

"use strict";

module.exports = {
  types: [
    { value: "feat", name: "feat:     A new feature" },
    { value: "test", name: "feat:     A new test" },
    { value: "fix", name: "fix:      A bug fix" },
    { value: "docs", name: "docs:     Documentation only changes" },
    {
      value: "style",
      name:
        "style:    Changes that do not affect the meaning of the code
            (white-space, formatting, missing semi-colons, etc)"
    },
    {
      value: "refactor",
      name:
        "refactor: A code change that neither fixes a bug nor adds a feature"
    },
    {
      value: "perf",
      name: "perf:     A code change that improves performance"
    },
    { value: "test", name: "test:     Adding missing tests" },
    {
      value: "chore",
      name:
        "chore:    Changes to the build process or auxiliary tools
            and libraries such as documentation generation"
    },
    { value: "revert", name: "revert:   Revert to a commit" },
    { value: "WIP", name: "WIP:      Work in progress" }
  ],

  scopes: [
    { name: "architecture" },
    { name: "batch-selector" },
    { name: "cascade-selector" },
    { name: "highlight" },
    { name: "holiday-picker" },
    { name: "ip-input" },
    { name: "map-picker" },
    { name: "page" },
    { name: "period-selector" },
    { name: "plan" },
    { name: "pwd-input" },
    { name: "table-tree-column" },
    { name: "time-picker" },
    { name: "time-selector" },
    { name: "tree-select" },
    { name: "empty" },
    { name: "utils" },
    { name: "others" }
  ],

  // it needs to match the value for field type. Eg.: "fix"
  /*
  scopeOverrides: {
    fix: [
      {name: "merge"},
      {name: "style"},
      {name: "e2eTest"},
      {name: "unitTest"}
    ]
  },
  */
  // override the messages, defaults are as follows
  messages: {
    type: "Select the type of change that you"re committing:",
    scope: "
Denote the SCOPE of this change (optional):",
    // used if allowCustomScopes is true
    customScope: "Denote the SCOPE of this change:",
    subject: "Write a SHORT, IMPERATIVE tense description of the change:
",
    body:
      "Provide a LONGER description of the change (optional). Use "|" to break new line:
",
    breaking: "List any BREAKING CHANGES (optional):
",
    footer:
      "List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:
",
    confirmCommit: "Are you sure you want to proceed with the commit above?"
  },

  allowCustomScopes: true,
  allowBreakingChanges: ["feat", "fix"],

  // limit subject length
  subjectLimit: 100
};

上述內容都可以進行修改。
到現在為止只是對提交的信息做了效驗，這是為了提交日志的規范性，那么這個是僅僅不夠，我們應該在檢測一下所提交的代碼是否符合規范才行。為此我們需要安裝husky（這個是用于提交git代碼的鉤子函數）, npm install husky --save-dev,安裝完之后，我們就需要在packages.json增加運行鉤子函數。

"husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "commit-msg": ....,
      等鉤子函數
      
    }
  }

這樣就簡單的成功對代碼進行效驗了，當然這邊更進一步的可以使用lint-staged這個,可以將取得所有被提交的文件依次執行寫好的任務。也就是說鉤子函數中我們只需要這樣寫

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": ....,
      等鉤子函數
      
    }
  }

然后在配置一個.lintstagedrc文件，并寫好需要執行的命令

{
  "*.js": [
    "vue-cli-service lint packages src",
    "git add"
  ], // 這邊是檢測js代碼
  "*.vue": [
    "vue-cli-service lint packages",
    "git add"
  ], // 這邊是檢測vue代碼
  "packages/**/*.scss": [
    "stylelint packages/**/*.scss --fix",
    "git add"
  ] // 這個是檢測樣式的，后面再補充
}

然后用是commit-msg增加commitlint -E HUSKY_GIT_PARAMS,通過安裝commitlint來檢測提交代碼的規范

之后就是stylelint的效驗，這個是用于效驗css的規范，比如樣式的順序，width需要在height之，等等這一類的規范
安裝npm i stylelint --save-dev然后增加.styleintrc文件，用于添加效驗規則

{
  "plugins": ["stylelint-prettier", "stylelint-scss"],
  "extends": [
    "stylelint-config-idiomatic-order",
    "stylelint-config-standard",
    "stylelint-config-prettier"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    "prettier/prettier": true
  }
}

最后附上一份較全的package.json文件

{
  "name": "test",
  "version": "0.01",
  "scripts": {
    "lint": "vue-cli-service lint packages src && stylelint packages/**/*.scss --fix",
    "cz:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
    "dev": "vue-cli-service serve",
    "lib:all": "npm run lib:clean && npm run lib:i18n && npm run lib:common && npm run lib:umd && npm run lib:utils",
    "lib:clean": "rimraf lib",
    "lib:common": "cross-env LIB_TYPE=common vue-cli-service build --no-clean --target lib --formats commonjs --name hui-pro src/index.js",
    "lib:i18n": "cross-env NODE_ENV=js babel src/locale --out-dir lib/locale",
    "lib:utils": "cross-env NODE_ENV=node babel-node bin/generateIndex && cross-env NODE_ENV=js babel packages/utils --out-dir utils",
    "lib:umd": "cross-env LIB_TYPE=umd vue-cli-service build --no-clean --target lib --formats umd-min --name hui-pro src/index.js",
    "vuepress:dev": "vuepress dev docs"
  },
  "dependencies": {
    "jsencrypt": "^2.3.1",
    "moment": "^2.24.0",
    "qs": "^6.5.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/node": "^7.2.2",
    "@commitlint/cli": "^7.2.0",
    "@commitlint/config-conventional": "^7.5.0",
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-module-resolver": "^3.1.3",
    "commitizen": "^3.0.5",
    "conventional-changelog": "^3.0.5",
    "cross-env": "^5.2.0",
    "cz-customizable": "^5.2.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "highlightjs": "^9.12.0",
    "husky": "^1.1.1",
    "ip": "^1.1.5",
    "lint-staged": "^8.1.3",
    "node-sass": "^4.11.0",
    "prettier-eslint": "^8.8.2",
    "prettier-stylelint": "^0.4.2",
    "sass-loader": "^7.1.0",
    "stylelint": "^9.10.1",
    "stylelint-config-idiomatic-order": "^6.2.0",
    "stylelint-config-prettier": "^5.0.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-prettier": "^1.0.6",
    "stylelint-scss": "^3.5.1",
    "stylelint-webpack-plugin": "^0.10.5",
    "vue": "^2.5.21",
    "vue-cli-plugin-changelog": "^1.1.9",
    "vue-cli-plugin-lint-staged": "^0.1.1",
    "vue-router": "^3.0.1",
    "vue-svg-loader": "^0.12.0",
    "vue-template-compiler": "^2.5.21",
    "webpack-node-externals": "^1.7.2"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "Chrome > 48",
    "Edge > 16",
    "Firefox > 62",
    "IE > 9",
    "Safari > 11"
  ],
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "files": [
    "lib",
    "src",
    "packages",
    "utils"
  ],
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "post-merge": "npm install",
      "pre-commit": "lint-staged"
    }
  },
  "main": "lib/hui-pro.common.js"
}