【vue基础篇】极简 ESLint + Prettier 配置教程_vue prettier

【Vue 基础篇】极简 ESLint + Prettier 配置教程

VsCode + Vue + ESLint + Prettier 实现 代码格式规范 + 保存自动修复代码(js+vue)

先上图看效果

前言

删繁就简，字斟句酌，只写通俗易懂的文章；

我曾在很长一段时间里，都没有搞清楚 ESLint 的正确配置方法。网上的文章质量也是一言难尽，造成了许多的误导。现在，我理清楚了 ESLint 的配置逻辑。撰写此文，以作日后查漏补缺之用，也希望能对同样迷惑的你带来帮助；

亲测，历经多次测试。不管是在创建新项目，还是改造旧项目时，跟着教程进行配置都是 ok 的；

系统环境:

node.js 版本是：v12.14.0

npm 版本是：6.13.4

vue-cli 版本是：vue/cli 4.5.11 
1
2
3
4
5

安装 VsCode 插件

首先安装两个 VsCode 插件

1.ESLint2.Prettier - Code formatter

配置 VsCode “Workspace.json”

路径：组合键 ctrl+shift+p -> 首选项：打开用户设置 -> 切换到工作区标签 -> 鼠标点击右上角打开设置(json)

如果编辑器是英文状态下就是

路径：组合键 ctrl+shift+p -> Preferences: Open User Settings -> 切换到Workspace标签 -> 鼠标点击右上角Open Settings(json)

复制粘贴下面的 json 代码并保存即可

• Workspace(工作区).json{// 将prettier设置为默认格式化程序(在编辑器中有可能被其他Formatter占用，所以将prettier设置为默认Formatter)"editor.defaultFormatter": "esbenp.prettier-vscode",// 保存时自动格式化 (根据根目录下‘.prettierrc文件配置项’)"editor.formatOnSave": true,// Enable per-language"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": tr