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