如何配置Vue项目中的ESLint和Prettier以实现基础代码风格规范？

本文共计2737个文字，预计阅读时间需要11分钟。

目录 + 引用 + 前言 + 安装 + 配置VsCode + 插件 + 配置VsCode Workspace.json + 配置vue的package.json + 配置vue的.eslintrc.js + 配置vue的.prettierc + 配置eslint --fix 一键修复 + 配置ESLint 提交时检查 + 测试配置效果 + 问题

目录

• 引言
• 前言
• 安装 VsCode 插件
• 配置 VsCode "Workspace.json"
• 配置 vue 的 "package.json"
• 配置 vue 的 ".eslintrc.js"
• 配置 vue 的 ".prettierrc"
• 配置 "eslint --fix" 一键修复
• 配置 ESlint 提交时检测
• 测试配置效果
• 问题排查
• 尾声

引言

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

先上图看效果

前言

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

我曾在很长一段时间里，都没有搞清楚 ESLint 的正确配置方法。