工程搭建---代碼風格統一

一個項目是會有多個成員來開發的，所以統一開發規範是頗有必要的，否則每一個人都有本身的風格，同步以後代碼都會報錯。
我這邊是用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\n            (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\n            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: '\nDenote 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:\n',
    body:
      'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
    breaking: 'List any BREAKING CHANGES (optional):\n',
    footer:
      'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',
    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"
}