问题
工作场景中，由于项目越来越大，参与人员越来越多，通过成员约定或Code Review的形式来保障代码规范的方式也会因为需要耗费较多的精力和工作时间，导致项目规范的执行变得越来越难以落地。
除此之外，从社区众多的代码规范风格中，挑选出一套适合团队所有人的，也需要耗费大量时间及习惯成本。把本就宝贵的开发时间以及成长时间，浪费在这些边角的事情上实在是觉得不值。
解决方案
所以，建立一套自动化的代码风格检查及格式化工具，节省团队成员精力，就变得更有意义和价值。让所有人都更关注代码和逻辑本身，让程序员去做有价值的事情，这正是Prettier这个工具本身所努力的方向。也与我们的开发体验上需求相契合。
想必大家都已对 Eslint 有所了解，但对 Prettier 相对陌生些。简单来说，Eslint 负责代码风格的检查，可以自定义较多的复杂检查规则，给出警告或报错，同时具有一部分帮助你纠正代码风格的能力（eslint --fix）；Prettier 更加简单粗暴，直接扫描文件本身的 AST(抽象语法树),然后按照自己的格式化风格重新修改文件，也就是帮你进行完全的代码格式化，配置项简单，只要遵从它的风格就OK了。
基于此，我们引入Vue + Vetur + ESlint + Prettier | ESlint + Prettier 方案作为 Vue 项目和 JS-SDK 项目的代码风格审查及自动格式化方案。简单的思路就是通过 Vetur 来做 Vue 代码风格的检查比如template，style，Vetur 搭配 Eslint 检测 js 部分的代码风格， 调用 Prettier 进行代码风格的修正统一。
熟悉 Vscode 和 Eslint、 Prettier 的小伙伴可能知道 Vscode 的插件市场有这两个工具的插件。而且 npm 平台上 也有二者对应的工具包，到底选哪种好？很简单，对比一下：
npm 形式安装的工具包，都需要手动通过 npm run 对应的 npm-script 命令来执行
Vscode 插件可以结合编辑器本身，展示更友好、及时的错误提醒，保存即可格式化。
虽然，npm包工具结合 webpack 或者 gulp 这些工具也能达到保存即可格式化的效果，但还需要引入更多工具和设置，更费周张。那，第二种方式就成为了我们的首选方案了。
给出 Vscode 编辑器下的配置方案：
更新项目，并重新执行npm i
安装 Vscode 插件： editorconfig, Vetur, Eslint, Prettier
打开项目的设置： Ctrl + , (Mac : Cmd + ,) ，选择工作区设置,打开 setting.json 文件，把下面插件相关的配置拷贝入文件，并保存
{"eslint.validate": [{"language":"html","autoFix":true}, {"language":"vue","autoFix":true}, {"language":"javascript","autoFix":true}, {"language":"javascriptreact","autoFix":true} ],"editor.formatOnSave":false,"eslint.autoFixOnSave":true,"vetur.validation.template":false,}
项目中新增了 .eslintrc.js 文件，可以联合 Eslint 和 Prettier 的使用
module.exports = {root:true,env: {node:true},extends: ["plugin:vue/recommended","eslint:recommended","plugin:prettier/recommended","prettier/vue"],rules: {"no-console": process.env.NODE_ENV ==="production"?"error":"off","no-debugger": process.env.NODE_ENV ==="production"?"error":"off","no-unused-vars":"off",// "no-extra-semi": "error",// "semi": ["error", "never"],"no-redeclare":"off","no-empty":"off","no-undef":"off","no-case-declarations":"off","vue/no-use-v-if-with-v-for":"off","vue/no-unused-components":"off", },parserOptions: {parser:"babel-eslint"}};