工程搭建---代码风格统一

摘要：为此我们需要安装这个是用于提交代码的钩子函数安装完之后，我们就需要在增加运行钩子函数。等钩子函数这样就简单的成功对代码进行效验了，当然这边更进一步的可以使用这个可以将取得所有被提交的文件依次执行写好的任务。

一个项目是会有多个成员来开发的，因此统一开发规范是很有必要的，不然每个人都有自己的风格，同步之后代码都会报错。
我这边是用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"
}