结论：必须禁用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> 为啥 <code>
没同步变
大概率是 Volar 没启用，或者 Auto Rename Tag 压根没开 Vue 支持。Volar 是 Vue3 官方推荐的语言服务器，而 Auto Rename Tag 默认只认 html 和 xml，对 .vue 文件里的 <template></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 前端开发
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"></script>，但实际文件在 src/js/app.js，Live Server 不会自动映射源码目录
真正卡住人的从来不是插件装不装，而是每个插件背后那几行不起眼的配置项——它们不报错、不提示，但一旦漏掉，功能就静默失效。尤其当多个插件协同工作时（比如 Volar + ESLint + Prettier），少一个 prettier 在 extends 里，或少一个 @ 映射，整个链路就断在看不见的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
