VSCode下Vue代碼自動格式化配置

本人是一名C++程序員，最近由於工做的緣由須要使用Electron開發一個小軟件，因此從未使用過前端技術的我須要快速學習HTML、CSS、ES六、Node.js、VUE等一大堆東西，開發環境也從經常使用的Visual Studio 2010\2015切換到了Visual Studio Code。不得不說VSCode很優秀，但確實不熟悉，通過大量的猜想及實踐，我將過程整理以下：

1. 經過electron-vue建立工程，選擇安裝eslint並選擇standard風格，這就意味着只要代碼不符合此風格，連運行都夠嗆，但代碼風格統一是一名強迫症程序員的必備素質。
2. 語法高亮問題，經過VSCode打開工程，全部的*.vue文件沒有語法高亮，經過查詢資料，安裝Vetur插件後解決該問題，完美！
3. 爲了能讓eslint的配置生效，須要安裝ESLint插件，安裝完畢後，發現全部*.js文件裏代碼風格與eslint的standard風格不符的地方都以紅色波浪線標識出來了，可是，*.vue文件裏的js代碼並無，添加以下配置後解決該問題，完美！

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
]
複製代碼

4. 如今咱們但願能在保存代碼的時候自動格式化，只需加上"editor.formatOnSave": true這個配置就能夠了，可是咱們發現雖然保存時代碼可以自動格式化，可是並不會修復與eslint的standard風格不符合的地方，別急，加上"eslint.autoFixOnSave": true這個配置便可解決該問題，完美！
5. 等等，貌似發現幾個問題，在*.vue文件裏，保存文件時，會發現js代碼會先格式化成另一種風格，而後再被eslint給修復，現象就是先出現大量紅色波浪線，而後又消失，可是*.js文件裏不會出現此現象，因此猜想是Vetur搞的鬼，經實踐發現，只需加上"vetur.format.defaultFormatter.js": "none"便可解決該問題，完美！
6. 如今還剩最後一個問題，*.vue文件裏的html代碼在保存時並無自動格式化，經過查詢資料發現，只需加上"vetur.format.defaultFormatter.html": "js-beautify-html"配置便可解決該問題，完美！
7. 此時，代碼格式化問題已所有解決，全部的配置以下：

// 保存自動化
"editor.formatOnSave": true,
// 保存時自動fix
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],
// 使用插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 屏蔽vetur的js格式化
"vetur.format.defaultFormatter.js": "none"
複製代碼