前言
是的，网上这样的教程很多，但是我跟着配置后，发现还是有问题。
要么：save 后发现格式化了两次又恢复警告 warning 的样子。
要么：可以格式化了，却没有 fix 成功，还有若干 error。
以前只有 eslint 的时候，世界没这么混乱啊...
那么不废话，直接一次爆破它：
1. 安装插件
vscode 插件选项搜索这 4 个：Vetur、ESLint、Prettir-Code formatter、Prettier ESLint 直接安装。
2. 直接食用，答疑去 3
项目根目录创建 .vscode 文件夹，里面创建 settings.json（注意：不要写入 .gitignore）。
{
"------[vue]------": "使用 prettier 识别 vue，其他框架类似",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.packageManager": "yarn",
"prettier.packageManager": "yarn",
"eslint.run": "onSave",
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": true,
"files.eol": "\n",
"------typescript------": "参考自 https://github.com/microsoft/vscode",
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"typescript.tsc.autoDetect": "off",
"------mark below------": "关闭 vetur 中、js/ts 中的默认 format 格式化，打开 eslint 格式化",
"javascript.format.enable": false,
"vetur.format.defaultFormatter.js": "none",
"typescript.format.enable": false,
"vetur.format.defaultFormatter.ts": "none",
"eslint.format.enable": true,
"eslint.validate": ["vue", "javascript", "javascriptreact", "typescript"],
"------editor.codeActionsOnSave------": "开启 eslint 自动修复 js/ts 功能，最新语法",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
项目根目录创建 .prettierrc.json
{
"tabWidth": 2,
"useTabs": false,
"endOfLine": "auto",
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"bracketSpacing": true
}
打开 ESLint 和 Prittier 开关，插件右下角打勾 Allow Everywhere：
搞定收工！以上配置基于 vue-cli 创建的工程项目，确保有 .eslintrc.js 等必要文件，配置完记得 reload 下 vscode！。
另外这里就不贴 .eslintrc.js 的代码了，可以参考大厂的，也可以默认，统一规范嘛，习惯之后会香的，或者你可以参考我这个 canvas 制作的 摇奖小游戏 的配置。
3. 答疑
Q：我知道 vetur 内置了 prettier 和 eslint 的能力，这些插件还有必要单独装？
A：如果你想偷懒，就很有必要！
vetur 语法高亮，附带格式化及报错，但功能不全。eslint 用于质量检查校验代码，会在 VSCode 中抛出警告，需要你手动修改，而通常这样的错误都是空格、符号、无用变量之类的，让我动手？这很不优雅...这个时候需要一个自动化工具： prettier可以自动格式化，顺带统一风格，省时省力。
另外，项目中的配置文件优先级是高于 VSCode setting.json 的。
Q：为什么 save 后会进行两次格式化，出现闪回？
A：因为你的格式化插件太多了，VSCode 到底该听谁的？
-
VSCode 本身有个格式化程序。
-
eslint 可以执行格式化 js。
-
prettier 可以执行格式化 js html css 等。
-
vetur 可以执行格式化 vue 单文件中的各类语言。
然后，prettier 又比较慢，执行时间最长，你一按 save 键，eslint -> default -> prettier 依次执行，假如中间有任何不一致的规则，那不是闪闪闪......
Q：为什么格式化后依旧报错？
A：还是插件冲突。
vetur 内置了 prettier 和 eslint 的能力，有时候 prettier 的执行慢于 eslint。就会出现 Vue 文件中 js 格式化后 eslint 还报错的情况。
综上，我们直接暴力拆除，关掉不必要的默认配置，查看上文：
"------mark below------": "关闭 vetur 中、js/ts 中的默认 format 格式化，打开 eslint 格式化"
Q：其他方法
tips1：之前浏览了一个文章，有朋友直接使用了eslint-plugin-prettier，eslint-config-prettier让这些格式化插件只听prettier的，不管顺序，大家有兴趣可以试试，反正我不试，够用就好...
tips2：更暴力地，干脆别装插件了，全部卸载留个代码高亮，然后使用 vue-cli 集成好的格式化配置，貌似也可以。
最后
如果你觉得这篇内容对你有点帮助，记得点个 赞 丫。
另外，这篇本章会一直更新、修正和补充，地址不变，后续我计划在尾部补充工程化的其他实践作为扩展，算是笔记啦。
往期精选：
