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

一個(gè)項(xiàng)目是會有多個(gè)成員來開發(fā)的，因此統(tǒng)一開發(fā)規(guī)范是很有必要的，不然每個(gè)人都有自己的風(fēng)格，同步之后代碼都會報(bào)錯(cuò)。
我這邊是用Vscode編譯器的。

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

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: { // 這邊就是配置一些具體的規(guī)則，具體規(guī)則查看eslint，大部分不需要改，開發(fā)過程中發(fā)現(xiàn)問題了，覺得不合適，可以配置進(jìn)來
    // 判斷代碼中是否存在中文 (這邊如果不需要多語言模塊，那么就不需要配置)
    "vue-i18nstring/no-chinese-character-vue": 1,
    "vue-i18nstring/no-chinese-character-js": 1,
    "vue/html-indent": 1,
    // 以下是去除console和debugger當(dāng)然還有其他很多，如分號之類，根據(jù)風(fēng)格就行修改
    "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插件和這個(gè)配置文件，那么就可以檢測代碼了。此外一般格式化風(fēng)格也會有差異，這邊vscode支持.prettierrc文件來配置。
這樣所以這個(gè)項(xiàng)目的格式化風(fēng)格就會一致了。

{
  "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
      }
    }
  ]
}

當(dāng)然這邊僅僅做這個(gè)還是不夠的，為啥呢，因?yàn)橛腥丝赡軙峤灰恍┐a還有錯(cuò)誤的代碼。
因此這邊采用git倉庫。
首先全局安裝：npm install -g commitizen，這個(gè)工具是一個(gè)git提交的工具，可以做一些提交的檢測
然后commitizen init cz-customizable --save --save-exact，這樣就會自動在package.json增加

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

之后我們就可以使用git cz 來代替 git commit了，使用命令之后按給出的提出，給出相應(yīng)的選擇。這些選中都是可以修改了（配置文件可參考node_modules/cz-customizable/cz-config-EXAMPLE.js）這邊給出一個(gè)demo，在根目錄下創(chuàng)建.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
};

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

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

這樣就簡單的成功對代碼進(jìn)行效驗(yàn)了，當(dāng)然這邊更進(jìn)一步的可以使用lint-staged這個(gè),可以將取得所有被提交的文件依次執(zhí)行寫好的任務(wù)。也就是說鉤子函數(shù)中我們只需要這樣寫

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

然后在配置一個(gè).lintstagedrc文件，并寫好需要執(zhí)行的命令

{
  "*.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"
  ] // 這個(gè)是檢測樣式的，后面再補(bǔ)充
}

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

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

{
  "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"
}