VScode 格式化代碼保存時使用ESlint修復代碼

前言

在網上下載一個Vue-Element-Admin 后管項目跑起來后用VScode自帶個格式化代碼保存時，項目中ESlint就開始不樂意了一直瘋狂報錯真讓人頭大。隨后一個早上都在百度，谷狗，包括之前的寫的筆隨，整理出來兩個思路如下

第一項 VS code編輯使用eslint的規則去格式化代碼

{
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

VS code還可以指定ESLint的格式文件

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
    "plugins": ["html"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
]

第二項 使用 Prettier - Code formatter 根據eslint的規則去格式化代碼

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.run": "onSave",
    "eslint.autoFixOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

    "prettier.printWidth": 200,
    "prettier.requireConfig": true,
    "prettier.semi": false,
    "prettier.useEditorConfig": false,
    "prettier.useTabs": true,