提升前端效率的VSCode插件生成技巧-VSCode-PHP中文网

live server比open in browser更适合现代前端开发，因其启动本地http服务（如http://127.0.0.1:5500），支持保存即刷新、ajax/cors等生产环境行为，并解决图片加载、跨域及缓存问题。

提升前端效率的vscode插件生成技巧

没插件不等于没效率，但选错或配错插件，确实会让前端开发变慢、出错、协作翻车。 关键不是装得多，而是每个插件是否在真实场景里“稳、准、省力”。

保存后手动刷新页面是效率黑洞。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 /

这两个插件单独用都简单，但一起用时，错误提示打架、自动修复失效、保存不格式化——问题基本都出在规则覆盖顺序上。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

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 模块不被识别

写 import Header from '@/components/Header.vue' 时，按 Ctrl+Space 没反应，大概率是路径映射没被正确加载。

jsconfig.json 必须放在项目根目录，且文件名不能是 tsconfig.json（即使你用 TS，前端项目也建议优先用 jsconfig.json）
"baseUrl" 值必须是字符串 "."，不是 "./" 或空字符串，否则 VSCode 不识别相对基准
"paths" 的 key 是匹配模式（如 "@/*"），value 是数组，哪怕只有一个路径也要写成 ["src/*"]，漏掉方括号会导致整个 paths 失效

Vue 3 项目里装了 Vetur，再装 Vue - Official，会出现语法高亮错乱、ref() 类型推导失败、甚至编辑器卡顿。

Vetur 已停止维护，对 Vue 3 的 Composition API 支持不完整，尤其在 defineProps 类型推导和 setup 语法糖上容易报错
Vue - Official 是 Vue 官方维护的插件，依赖 Volar（已集成），它才是 Vue 3 的标准语言支持方案
卸载 Vetur 后，务必重启 VSCode（不是重载窗口），否则旧语言服务器可能仍在后台运行，继续干扰

插件不是越多越好，而是越少、越精准、越少需要手动干预越好。真正卡住效率的，往往不是功能缺失，而是两个插件互相覆盖、一个配置项写错、或者版本没对齐——这些细节，比学十个新插件更重要。