插件需按作用分层选用：eslint与prettier需配置规则优先级避免冲突；path intellisense依赖tsconfig路径配置实现补全，跳转靠vscode原生支持；quokka适合即时逻辑验证，debugger用于完整运行时调试；auto rename tag在jsx中存在解析局限，应辅以vscode内置自动闭合。
没几个插件真值得装满整个扩展列表——多数人装了 10 个，实际高频用的就 3–4 个，其余要么功能重叠，要么只在特定项目里偶尔触发。
ESLint 和 Prettier 冲突时怎么配才不报红？
不是“装了就能用”，而是经常 eslint 报错说 prettier 格式不对，或者保存后代码被反复格式化又还原。根本原因是两者规则打架：比如 prettier 强制不加分号，eslint 却开了 semi: ["error", "always"]。
- 必须在
.eslintrc.js的extends里把prettier放最后，且显式引入eslint-config-prettier关闭所有格式类规则 -
prettier插件本身不校验逻辑，只管格式；eslint才负责no-unused-vars、react-hooks/exhaustive-deps这类语义检查 - VSCode 设置里关掉
editor.formatOnSave，改用eslint --fix一键修复（配合右键菜单或快捷键），避免和 Prettier 自动格式化抢执行权
Path Intellisense 和别名路径跳转插件能共存吗？
能，但得看配置层级。常见问题是：路径补全出来了，Ctrl+Click 却跳不到目标文件，尤其遇到 @/utils 或 ~/components 这类 alias。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
Path Intellisense负责输入时自动补全路径字符串，依赖jsconfig.json或tsconfig.json中的"paths"配置 - 真正实现跳转的是 VSCode 原生的 “Go to Definition”，它只认
jsconfig.json/tsconfig.json，不认插件自定义的 alias 映射 - 所谓“别名路径跳转”插件（如
@ext:lihuiwang.vue-alias-skip）本质是 hack 了 VSCode 的解析逻辑，仅对.vue文件生效，对.ts或.jsx文件无效
Quokka 和 Debugger for Chrome 解决的是不同阶段的问题
新手常以为“能打断点=能实时看值”，结果发现 Quokka 里变量秒出结果，Chrome 调试器里还要刷新页面、点断点、等加载——它们压根不在同一层。
-
Quokka是沙盒式即时执行：写一行const a = [1,2,3].map(x => x * 2)，右侧立刻显示[2,4,6]，适合验证小逻辑、快速试 API 返回结构 -
Debugger for Chrome是真实运行时调试：要起本地服务（webpack-dev-server或vite dev），走完整生命周期，能看this上下文、React 组件状态、网络请求链路 - Quokka 不支持
import外部模块（除非手动配置quokka.js），也不模拟 DOM；Chrome 调试器里可以console.dir(document.body)，但没法像 Quokka 那样边写边看计算结果
Auto Rename Tag 在 JSX 里容易失效的边界情况
它在纯 HTML 中几乎 100% 可靠，但在 React/Vue 的 JSX 或模板语法里，会因为语法解析器差异漏掉某些闭合标签。
- 遇到
<div><mycomponent></mycomponent></div>，修改<div> 为 <code><section></section>后，
