vscode 代碼保存時自動格式化成 ESLint 風格

vscode 的默認的代碼格式化 alt+shift+f (windows) 沒法經過 eslint 的代碼風格檢查，，，

好比：

• 4個空格和2個空格（ESLint）
• 字符串用單引號（ESLint）

這樣在進行vue項目開發的時候，使用 eslint 代碼風格檢查就會報錯：

因此須要在保存的時候，使 vscode 代碼自動格式化成 eslint 風格的代碼，而且支持在 html 和 vue 中的代碼；

首先裝下 ESlint 插件

而後配置項：文件 -> 首選項 -> 設置，加上下面設置：

  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

eslint.autoFixOnSave 用來進行保存時自動格式化，可是默認只支持 javascript .js 文件

eslint.validate 用來配置做用的文件類型。

• eslint插件的配置說明中，直接寫的是"eslint.validate": [ "javascript", "javascriptreact", "html" ],所以我想固然一開始寫的是"eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ]，結果是不起做用的，必需要寫成上面那樣；
• autoFixOnSave 對於 .vue 文件，自動保存時（我是失焦保存）不會 autoFix ，必需要手動保存 ctrl+s 纔會 autoFix；對於 .js 文件，我失焦保存後，會 autoFix；不過對於一些沒法 autoFix 的，是不會 autoFix 的（譬如：多餘的分號會去掉，4個空格變2個，可是語法錯誤仍是會放那邊）；

參考文檔：

http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html