ESLint负责代码质量与逻辑检查，Prettier专注格式化；二者需协同配置避免冲突：安装eslint-config-prettier并后置引入，禁用ESLint中格式类规则，VSCode中设默认格式化器为Prettier且开启formatOnSave。
ESLint 和 Prettier 是前端代码规范落地最直接、最有效的两个插件，缺一不可；但装了不配好，反而会引发冲突、报错、格式反复颠倒。
ESLint 配置必须关掉与 Prettier 冲突的规则
常见错误现象：prettier 格式化后又触发 eslint 报错，比如单引号变双引号、分号被删又提示缺失——本质是两条工具在“打架”。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends中靠后引入（顺序很重要） - 不要手动写
'quotes': ['error', 'single']这类格式类规则，Prettier 负责格式，ESLint 负责逻辑和质量 - Vue 项目要额外加
plugin:vue/vue3-essential，React 项目加plugin:react/recommended
Prettier 的保存格式化必须绑定到 ESLint 的默认 formatter
很多人开了 editor.formatOnSave，但没指定谁来格式化，结果 VSCode 用内置 JS formatter，和 ESLint/Prettier 完全无关。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在
settings.json中必须设"editor.defaultFormatter": "esbenp.prettier-vscode" - 同时确保
"editor.formatOnSave": true，否则保存不生效 - 如果项目用了 TypeScript，还要确认
prettier插件支持.ts和.tsx（新版默认支持，老版本需检查）
VSCode 设置里别漏掉关键开关
插件装了、配置写了，但 VSCode 自身设置没开，整个流程就断在第一步。
立即学习“前端免费学习笔记（深入）”；
-
editor.formatOnSave必须为true（不是靠插件开关控制） -
editor.codeActionsOnSave建议加上{"source.fixAll.eslint": true}，这样保存时自动修复 ESLint 可修的问题 - 禁用
editor.formatOnType，否则打个括号就格式化，干扰编码节奏
真正容易被忽略的是：ESLint 规则是否实际生效，得看项目根目录有没有 .eslintrc.js 或 .eslintrc.cjs，且文件里 root: true 必须存在——否则子目录可能读不到规则，导致某些文件完全不校验。
