vscode - 自动格式化 vue-cli 项目文件

前端工程项目，为了团队代码的规范化与在编写阶段排查潜在的错误，少不了一些检测工具的使用，而相对于后端，前端代码涉及到HTML、CSS、JavaScript，如使用过框架，则包含的语法更是复杂（如 vue、angular、react、TypeScript等等）。
检测工具很多，如：
html : HtmlHint
css/scss: StyleLint
Js/jsx: eslint
…
笔者常用Eslint，eslint 的规则很多，配置规则也很方便

点击前往规则参考

具体使用请参考：
https://eslint.bootcss.com/docs/user-guide/configuring/
检测工具很方便我们排除很多错误，而很多时候，我们是接手别人的代码，使用规范与自身不同，看着编译器一大堆的红蚯蚓，束手无策，让人脑瓜疼！

此时非常想有一个快捷按照自己配置的eslint规则格式化文件的工具出现（本文针对vue cli 项目），搜索相关发现 vscode（笔者所使用编译器） 本来就可支持，
首先vscode 安装扩展插件Vetur 、ESLint；

打开vscode settings.json加入以下代码：

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

在根目录下的.eslintrc.js 中加入：

plugins: [
    "vue"
  ]

完成后重启编译器（貌似重不重启都可以，没具体试过）
再次打开文件，面对那一堆的小蚯蚓，按下ctrl + s 后，编译器将为我们按照配置的规则自动修改代码。

当然 自动更改有时也会发病（笔者刚开始时，重启重试几遍才通过测试）
偶尔有些地方也未修改到（不知是规则没配置对还是小bug）

前端菜鸟 如有不对请留言指出！