真正提升前端日均产出的插件组合需围绕“写得快、错得少、改得准、看得清”精准选配：ESLint+Prettier（需规则对齐）、Auto Rename Tag、Path Intellisense、Debugger for Chrome（配launch.json及正确webRoot），避免堆砌导致冲突或失焦。
直接说结论：真正提升前端日均产出的插件组合，不是装得越多越好，而是围绕「写得快、错得少、改得准、看得清」四个动作精准选配。装错或堆砌反而拖慢启动速度、触发冲突、掩盖真实问题。
ESLint + Prettier 为什么必须配对用，而不是单装一个
只装 ESLint：能标红未定义变量、console、拼写错误，但格式混乱依旧——缩进不一致、引号混用、分号随意，团队协作时 Git diff 全是噪音；
只装 Prettier：代码自动变整齐，但逻辑隐患照旧——比如 if (a = b) 这种赋值误写，它完全不管。
两者配合的关键在于规则对齐：
• 必须安装 eslint-config-prettier 插件，关掉 ESLint 里所有和格式相关的规则（如 indent、quotes），避免和 Prettier 冲突
• 在 .eslintrc.js 中 extends 顺序要写成 ['eslint:recommended', 'prettier']，否则 prettier 的关闭规则不生效
• VS Code 设置里把 editor.defaultFormatter 设为 esbenp.prettier-vscode，同时开启 editor.formatOnSave
Auto Rename Tag 和 Path Intellisense 解决哪类高频卡点
这两个插件解决的是「写一半卡住」型低效：
• Auto Rename Tag 不只是 HTML 标签同步——Vue 模板里的 <template>、<script setup>、<style scoped> 闭合标签也同步改；React JSX 中 <div> 改成 <section>，闭合标签自动跟上
• Path Intellisense 对路径补全有上下文判断：在 import 行按 Ctrl+Space，它只提示 .ts 或 .vue 文件；在 CSS @import 里则优先提示 .scss；如果项目用了 @/ 别名，需确保 jsconfig.json 里已配置 "paths"，否则补全失效
• 容易被忽略的坑：某些框架（如 Vite）默认不生成 jsconfig.json，得手动创建，否则 Path Intellisense 识别不了别名
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Live Server 和 Debugger for Chrome 怎么避免调试失焦
这两个插件常被当成“一键预览”工具，但实际调试中容易出偏差：
• Live Server 启动的是独立 HTTP 服务，和项目构建流程无关——你改了 src/main.ts，它不会触发 Vite/HMR，只是硬刷新整个页面；真要热更新，得靠框架自身 dev server（如 vite dev）
• Debugger for Chrome 必须配 launch.json，且 webRoot 要指向源码目录（如 "${workspaceFolder}/src"），否则断点打在打包后的 dist 文件里，根本跳不回原始 TS/JS 行
• 更关键的是：Chrome 浏览器必须关闭「启用 JavaScript 源映射」以外的其他开发者工具选项，否则 Source Map 加载失败，断点失效
• 实操建议：日常开发用框架 dev server（命令行 npx vite），只在需要复现特定浏览器行为时才用 Debugger for Chrome 连接本地服务
立即学习“前端免费学习笔记（深入）”；
真正卡住前端效率的，往往不是功能缺失，而是插件之间规则打架、路径解析错位、调试目标偏离源码——这些细节没对齐，装再多插件也只是在原地打转。
