结论：必须禁用ESLint中与Prettier重叠的格式规则，推荐安装eslint-config-prettier并将其置于extends末尾，同时在VSCode中设Prettier为默认格式化器，确保二者职责分离、协同生效。
ESLint 与 Prettier 冲突时怎么配才不报红也不乱格式
直接说结论：不能只装插件，必须关掉 ESLint 里和 Prettier 重叠的格式规则。否则 eslint --fix 和 prettier 会互相覆盖，保存后代码忽左忽右、引号忽单忽双，甚至出现 ESLint: Delete `;` 和 Prettier: Insert `;` 这类矛盾提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在项目根目录加
.eslintrc.js，extends里必须包含prettier（如['eslint:recommended', 'prettier']），它会自动禁用所有与 Prettier 冲突的规则 - VSCode 设置中启用
editor.formatOnSave，但把editor.defaultFormatter设为esbenp.prettier-vscode，而不是 ESLint 插件 - 如果团队用 Airbnb 规范，别直接
extends: 'airbnb'，要改成extends: ['airbnb', 'prettier']，否则quotes、semi等规则必然打架 - 检查
eslint-config-prettier是否已安装：npm install eslint-config-prettier --save-dev，没装就永远清不干净冲突
Vue3 模板里改 <div> 为啥 </div> 没同步变
大概率是 Volar 没启用，或者 Auto Rename Tag 压根没开 Vue 支持。Volar 是 Vue3 官方推荐的语言服务器，而 Auto Rename Tag 默认只认 html 和 xml，对 .vue 文件里的 <template> 块默认不生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认已安装
Volar（不是旧版Vetur），并在 VSCode 设置里关闭Vetur，否则两者会抢语言服务导致功能失效 - 打开
settings.json，加这一行："auto-rename-tag.activationOnLanguage": ["html", "vue", "jsx"] - 重启 VSCode 或重新加载窗口（
Ctrl+Shift+P→Developer: Reload Window），否则新配置不生效 - 如果仍无效，检查当前文件右下角语言模式是否为
Vue（不是HTML），点击切换；Volar 只在Vue模式下接管模板语法
路径补全写 @/components/ 却找不到文件
Path Intellisense 不认识 @ 别名，是因为它不会自动读取 jsconfig.json 或 tsconfig.json 的 compilerOptions.paths。它只做“物理路径”补全，除非你告诉它怎么映射。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在项目根目录确保有
jsconfig.json（TS 项目用tsconfig.json），内容含："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } - 在 VSCode 设置里搜
path-intellisense.mappings，手动加一条：{"@": "${workspaceFolder}/src"} - 别依赖插件自动探测——有些项目结构（比如 monorepo 中子包的
src不在根目录）必须显式配置映射路径 - 如果用了 Vite，确认
vite.config.ts里resolve.alias和jsconfig.json一致，否则跳转能成功、补全却失败
Live Server 打开页面却是空白或 404
不是插件坏了，而是它默认只服务当前打开的文件夹的根路径，且只认 index.html 为入口。如果你在子目录里编辑 login.html，点「Go Live」后浏览器打开的是根目录，自然 404。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 右键点击你想要预览的 HTML 文件 →
Open with Live Server，而不是点右下角的「Go Live」按钮 - 想让某个子目录变成服务根目录？在该目录下新建一个
.vscode/settings.json，加：{"liveServer.settings.port": 5501, "liveServer.settings.CustomBrowser": "chrome"}，再右键该目录 →Open in Default Browser - 如果页面空白，检查控制台是否有
CORS报错——Live Server 不支持跨域请求，AJAX 调用后端接口时得换用npm run dev启动真实开发服务器 - 静态资源路径写错也会白屏，比如
<script src="js/app.js">，但实际文件在src/js/app.js，Live Server 不会自动映射源码目录
真正卡住人的从来不是插件装不装，而是每个插件背后那几行不起眼的配置项——它们不报错、不提示，但一旦漏掉，功能就静默失效。尤其当多个插件协同工作时（比如 Volar + ESLint + Prettier），少一个 prettier 在 extends 里，或少一个 @ 映射，整个链路就断在看不见的地方。
