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"
复制代码