VSCode插件让前端开发更具竞争力-VSCode-PHP中文网

live server必须替代open in browser，因其支持保存自动刷新、多设备同步及局域网访问，而后者仅提供单次跳转且无热重载；配置时需注意端口冲突、项目类型适配及host设置。

vscode插件让前端开发更具竞争力

VSCode插件本身不直接提升“竞争力”，但选错、配错或漏掉关键插件，会实实在在拖慢开发节奏、增加低级错误、拉低协作效率——这些才是你在团队里被比下去的真正原因。

保存后浏览器不自动刷新，是新手最常卡住的点。Open in Browser 只做一次跳转，改完 HTML/CSS/JS 还得手动按 F5；Live Server 则监听文件变化，触发实时重载。

两者不是装上就完事，冲突规则不清理，Format On Save 会反复格式化又报错，编辑器卡顿、保存变慢。

PigX UI 前端开发

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

下载

eslint-config-prettier 必须装，且要写在 extends 数组最后，否则前面的规则会覆盖它禁用的格式类规则
prettier.semi 设为 false 时，ESLint 的 semi 规则必须关掉，否则保存时 Prettier 删除分号，ESLint 立刻标红
VSCode 的默认 formatter 要明确设为 esbenp.prettier-vscode，否则右键“格式化文档”可能调用错工具

前者补全路径字符串，后者让 Ctrl+Click 能跳进 @/components/Button.vue 这种别名路径——但它们依赖不同配置，混用会失效。

Path Intellisense 靠 jsconfig.json 或 tsconfig.json 中的 compilerOptions.paths 提供 alias 映射
别名跳转（如 vue-alias-skip）需要额外插件，且只认 @、~ 等硬编码前缀，不读 tsconfig
Vue 项目中，Volar 插件自带部分别名支持，但若用了自定义 alias（如 $api），仍需插件补足

不是插件坏了，是 VSCode 默认对 .jsx 文件启用的语法高亮语言模式（JavaScript React）没把括号识别为“成对结构”。

手动切换语言模式：右下角点击当前语言名 → 选 JavaScript React（不是 JavaScript）
检查设置中 editor.bracketPairColorization.enabled 是否为 true（VSCode 1.68+ 内置功能，旧版才需插件）
若用了 Volar 或 TypeScript 插件，它们可能覆盖括号着色逻辑，此时优先信任内置 bracketPairColorization，而非插件

插件不是越多越好，而是每个都得清楚它在哪个环节起作用、在哪种文件类型下生效、和谁配合或冲突——漏掉任一环，效率就断在那儿了。