webstorm开发Vue-js-html-css之Eslint+EditorConfig+prettier自定义校验规则和代码格式化问题总结！

真正来一句：不管是Python的pycharm 还是 js开发的webstrom感觉是目前最好的开发工具！以前用vscode开发，尼玛大部分的时间都用在配置上面，浪费了太多的时间，今天总结一下webstorm如何支持自定义的Eslint规则并prettier插件完美格式化，配置好之后，只要（快捷键Ctrl+Alt+L）即可！

特别注意：EditorConfig配置文件很关键，尤其缩进方面他的设置必须和eslint保存统一！

eslint核心参数配置中文版：http://eslint.cn/docs/user-guide/command-line-interface

最核心的eslint规则配置（js的语法规则）：http://eslint.cn/docs/rules/

npm install --dev eslint-plugin-vue

支持vue规则官方文档：https://eslint.vuejs.org/rules/

具体操作大纲

1. 统一团队使用的开发工具（webstorm，ide 编辑器）
2. 安装 eslint 和 prettier （node 模块）----vue3图形界面会自动安装！
3. 安装 prettier （ ide 编辑器的插件）---Webstorm会自动安装（eslint 用webstorm自带的更方便，不建议使用第三方的）
4. 配置 eslint 和 prettier
5. 配置 editorconfig （这里很重要，尤其缩进必须和eslint保持统一）
6. 严格督查，按照流程检查和格式化代码，按照规范和要求进行代码提交。

package.json文件的配置具体规则：更多规则参考ESlint官方文档

{
  "name": "vue_solidity_truffle_2019",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "register-service-worker": "^1.5.2",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-e2e-nightwatch": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-pwa": "^3.4.0",
    "@vue/cli-plugin-unit-mocha": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-eslint": "^10.0.1",
    "chai": "^4.1.2",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "fibers": "^3.1.1",
    "lint-staged": "^8.1.0",
    "sass": "^1.16.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {
      "generator-star-spacing": "off",
      "no-unexpected-multiline": "off",
      "no-debugger": "off",
      "no-console": "off",
      "no-unused-vars": "warn",
      "no-mixed-spaces-and-tabs": [
        "warn",
        "smart-tabs"
      ],
      "semi": [
        "warn",
        "always"
      ],
      "indent": [
        "warn",
        4
      ],
      "array-bracket-spacing": [
        "warn",
        "always"
      ],
      "space-in-parens": [
        "warn",
        "always"
      ],
      "brace-style": [
        "warn",
        "1tbs"
      ],
      "no-multiple-empty-lines": [
        "warn",
        {
          "max": 2
        }
      ],
      "object-curly-spacing": [
        "warn",
        "always"
      ],
      "object-curly-newline": [
        "warn",
        {
          "ImportDeclaration": {
            "multiline": true
          }
        }
      ],
      "vue/html-indent": [
        "warn",
        4
      ],
      "vue/attribute-hyphenation": "error",
      "vue/no-unused-components": "warn",
      "vue/require-prop-types": "off"
    }
  }
}