ESLint与Prettier不打架的关键是职责分离：ESLint专注代码质量检查，Prettier专管格式化；需安装eslint-config-prettier并在.eslintrc.js的extends末尾添加"prettier"以禁用所有格式类规则，同时确保VSCode默认格式化器设为Prettier且关闭ESLint的格式能力。
ESLint 与 Prettier 怎么配才不打架
直接装两个插件但没调好，eslint 报错、prettier 格式化完又触发 eslint 报错，是新手最常卡住的地方。核心问题不是谁对谁错，而是规则重叠。
关键操作只有三步：
- 在
.eslintrc.js的extends数组里，把prettier放在最后（如['airbnb', 'prettier']） - 必须安装
eslint-config-prettier，它负责关掉所有和格式相关的 ESLint 规则 -
prettier配置里别写semi: true这类和 ESLint 冲突的项，交给eslint-config-prettier统一裁决
常见错误：手动在 rules 里加 'no-unused-vars': 'off' 之类，结果 prettier 每次保存都把分号删了，eslint 立刻标红——这不是插件问题，是配置没断干净。
路径跳转失效时该查哪几处
@/components/Button.vue 点不了、Ctrl+Click 没反应，90% 不是插件没装，而是路径映射没对上。
立即学习“前端免费学习笔记（深入）”；
优先检查这三点：
-
jsconfig.json或tsconfig.json里有没有"baseUrl": "."和"paths"块，且@/*映射到了["src/*"] - VSCode 是否识别到配置文件——打开任意
.js文件，按 Ctrl+Shift+P 输入 “JavaScript: Restart TS Server”，强制刷新语言服务 - 如果用了
vue-alias-skip这类专用插件，确认它的设置页里填的是真实项目根路径，不是相对路径或空格结尾
注意：vscode-icons 只管图标，不影响跳转；Path Intellisense 能补全路径但不解决跳转，别指望它修这个问题。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Live Server 启动后页面不自动刷新
改了 HTML/CSS，浏览器没变，不是插件坏了，而是默认监听范围太窄。
根本原因是 Live Server 默认只监视当前打开的文件及其同级目录，深层嵌套的资源（比如 src/assets/style.css）压根不在监听列表里。
解决方法很简单：
- 右键 HTML 文件 → “Open with Live Server”，而不是点底部状态栏的 Go Live —— 前者会以该文件所在目录为根启动服务
- 在
settings.json里加配置："liveServer.settings.CustomBrowser": "chrome"和"liveServer.settings.AdvanceCustomBrowserCmdLine": ["--auto-open-devtools-for-tabs"]，确保 DevTools 开着，方便看 Network 面板里资源是否 404 - 如果项目用 Vite 或 Webpack，别硬套 Live Server，直接用框架自带 dev server，它才真正理解模块依赖和 HMR
Bracket Pair Colorizer 为什么括号颜色没变
装了插件但括号还是黑白，大概率是 VSCode 自带的括号高亮功能开了，把插件覆盖了。
必须关掉原生功能才能让插件生效：
- 打开设置（Ctrl+,），搜
highlight matching bracket，把它设为false - 再搜
bracket pair colorizer，确认enabled是 true，且dark theme/light theme对应的颜色方案已加载 - 重启 VSCode —— 这个插件不支持热重载，改完设置必须重启才生效
另外，它只对 {}、[]、() 生效，HTML 标签的 <div></div> 不归它管，那是 Auto Close Tag 和 Auto Rename Tag 的职责。
