前端交付效率瓶颈在于重复操作、格式争议、环境不一致和调试低效；一套实战验证的插件组合可实现“保存即生效、改完即可见、错在哪一眼明”。
直接说结论：前端交付效率瓶颈往往不在写代码，而在重复操作、格式争议、环境不一致和调试低效。一套经过实战验证的插件组合，能把这些环节压缩到“保存即生效、改完即可见、错在哪一眼明”的程度。
Live Server 为什么必须开热重载且禁用默认端口
很多人装了 Live Server 却没真正用起来——它默认不开启热重载，只靠右键“Open with Live Server”启动，改完还得手动刷新。更麻烦的是，默认端口 5500 容易和本地其他服务（比如 Vue CLI 的 8080、Next.js 的 3000）冲突，导致预览失败但错误不报。
- 必须在设置中启用
"liveServer.settings.donotShowInfoMsg": true（避免弹窗干扰），并确认"liveServer.settings.AdvanceCustomBrowserCmdLine": ""为空，否则可能强制打开旧浏览器 - 把端口设为
0，让插件自动分配空闲端口，避免硬编码冲突 - 关键配置项：
"liveServer.settings.CustomBrowser": "chrome"（指定浏览器，避免用系统默认 IE/Edge 打开空白页） - 如果项目含
index.html以外的入口（如demo.html），需右键该文件再点Go Live，否则仍会找index.html
ESLint + Prettier 配合时最常踩的三个坑
ESLint 和 Prettier 一起用，不是装上就完事。它们规则打架、执行顺序错乱、修复结果反向污染，是交付前代码检查失败的高频原因。
- 不加
eslint-config-prettier：Prettier 的格式规则（如单引号、结尾分号）会和 ESLint 冲突，导致保存后反复格式化又报错 -
editor.formatOnSave开了，但editor.defaultFormatter没指向esbenp.prettier-vscode，结果 ESLint 自动修复覆盖了 Prettier 格式 - 项目根目录缺少
.prettierignore，导致node_modules或构建产物（dist/）也被格式化，拖慢保存响应速度 - Vue 项目里，
vue/max-attributes-per-line这类规则若没在.eslintrc.js中显式关闭，会在单文件组件模板里疯狂报错，但实际不影响运行
Auto Rename Tag 和 Auto Close Tag 在 JSX/Vue 中的行为差异
这两个插件看着简单，但在 React/Vue 场景下表现完全不同：前者对自闭合标签（如 <img>）无效，后者在 Vue 的 <template></template> 块里会误闭合 v-if 指令。
-
Auto Rename Tag对<input type="text">不触发重命名——它只处理成对标签，自闭合标签得靠 ESLint 的react/self-closing-comp规则来约束 -
Auto Close Tag在 Vue 单文件组件中，遇到<div v-if="show"> 会自动生成 <code>
