Live Server比Open in Browser更适合现代前端开发，因其启动本地HTTP服务（如http://127.0.0.1:5500），支持保存即刷新、AJAX/CORS等生产环境行为，并解决图片加载、跨域及缓存问题。
没插件不等于没效率，但选错或配错插件，确实会让前端开发变慢、出错、协作翻车。 关键不是装得多，而是每个插件是否在真实场景里“稳、准、省力”。
Live Server 为什么比 Open in Browser 更适合现代前端开发
保存后手动刷新页面是效率黑洞。Open in Browser 只解决“打开”这一步，而 Live Server 解决的是“改完就看到效果”整个闭环。
- 它起一个本地 HTTP 服务（默认
http://127.0.0.1:5500），不是直接用file://协议打开——这意味着 AJAX、import、CORS 等行为更贴近生产环境 - 支持热重载：HTML/CSS/JS 文件保存即刷新，无需手动点浏览器刷新按钮
- 局域网可访问：手机扫码预览调试移动端适配，只需在设置中加一行
"liveServer.settings.root": "./"并确保端口未被占用 - 常见坑：
index.html必须在项目根目录或配置的root路径下，否则右键“Open with Live Server”会报Cannot GET /
ESLint + Prettier 组合配置最容易卡住的三个地方
这两个插件单独用都简单，但一起用时，错误提示打架、自动修复失效、保存不格式化——问题基本都出在规则覆盖顺序上。
-
eslint-config-prettier必须出现在extends数组最后，否则它的“禁用所有格式化规则”会被前面的规则覆盖 - Prettier 的
formatOnSave和 ESLint 的fixOnSave别同时开；推荐只开 Prettier 的formatOnSave，再用 ESLint 做语义检查（如no-unused-vars） - Vue 项目里，如果用了
vue-eslint-parser，必须在.eslintrc.js中显式指定parser: 'vue-eslint-parser'，否则.vue文件里的 script 模块不被识别
Path Intellisense 配置 alias 后路径补全不生效？检查 jsconfig.json 这三处
写 import Header from '@/components/Header.vue' 时，按 Ctrl+Space 没反应，大概率是路径映射没被正确加载。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
jsconfig.json必须放在项目根目录，且文件名不能是tsconfig.json（即使你用 TS，前端项目也建议优先用jsconfig.json） -
"baseUrl"值必须是字符串"."，不是"./"或空字符串，否则 VSCode 不识别相对基准 -
"paths"的 key 是匹配模式（如"@/*"），value 是数组，哪怕只有一个路径也要写成["src/*"]，漏掉方括号会导致整个 paths 失效
Vetur 和 Vue - Official 插件不能共存
Vue 3 项目里装了 Vetur，再装 Vue - Official，会出现语法高亮错乱、ref() 类型推导失败、甚至编辑器卡顿。
- Vetur 已停止维护，对 Vue 3 的 Composition API 支持不完整，尤其在
defineProps类型推导和setup语法糖上容易报错 - Vue - Official 是 Vue 官方维护的插件，依赖 Volar（已集成），它才是 Vue 3 的标准语言支持方案
- 卸载 Vetur 后，务必重启 VSCode（不是重载窗口），否则旧语言服务器可能仍在后台运行，继续干扰
插件不是越多越好，而是越少、越精准、越少需要手动干预越好。真正卡住效率的，往往不是功能缺失，而是两个插件互相覆盖、一个配置项写错、或者版本没对齐——这些细节，比学十个新插件更重要。
