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

阳光穿透心脏的1/2处 2021-09-18 10:36 551阅读 0赞

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

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

**eslint核心参数配置中文版：[http://eslint.cn/docs/user-guide/command-line-interface][http_eslint.cn_docs_user-guide_command-line-interface]**

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

npm install --dev eslint-plugin-vue

[支持vue规则官方文档：https://eslint.vuejs.org/rules/][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.  严格督查，按照流程检查和格式化代码，按照规范和要求进行代码提交。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2][]

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

[http_eslint.cn_docs_user-guide_command-line-interface]: http://eslint.cn/docs/user-guide/command-line-interface
[http_eslint.cn_docs_rules]: http://eslint.cn/docs/rules/
[vue_https_eslint.vuejs.org_rules]: https://eslint.vuejs.org/rules/
[webstorm]: https://www.baidu.com/s?wd=webstorm&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/c414387c3f62416aa355bb60f6b37c2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1]: /images/20210812/ebc62d9a08794709aa084fac6339c345.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2]: /images/20210812/b46a876e49a2468fbe7103c42e08d8ed.png