Open in Browser更适合静态HTML快速验证，因其毫秒级打开file://协议页面、无需启动服务、无端口冲突或热重载延迟，适用于纯HTML+CSS单页原型、教学演示等不涉及JS模块或网络请求的场景。

为什么 Open in Browser 比 Live Server 更适合静态 HTML 快速验证

当你只写单页 HTML + CSS，不涉及 JS 模块加载或路由时，Open in Browser 启动更快、无后台进程、不监听端口，避免了 Live Server 常见的端口占用冲突或热重载延迟问题。

常见错误现象：改完 index.html 保存后浏览器没刷新，或弹出 ERR_CONNECTION_REFUSED —— 很可能是因为 Live Server 进程卡死或端口被占，而 Open in Browser 完全绕过这些。

• 适用场景：原型稿验证、纯静态页面调试、教学演示、CodePen 类快速草稿
• 参数差异：Open in Browser 默认用系统默认浏览器打开 file:// 协议路径；Live Server 强制走 http://localhost:xxxx
• 性能影响：前者毫秒级打开，后者需启动本地服务（平均 300–800ms），对单文件毫无必要
• 快捷键建议：在 keybindings.json 中绑定 ctrl+shift+b 到 extension.openInBrowser，比右键菜单快得多

CSS Peek 跳转失效的三个真实原因和对应解法

光标停在 class="header" 上按 F12 没反应？不是插件坏了，大概率是以下某个条件没满足。

• 文件未保存：CSS 文件必须已保存（哪怕只多一个空格），未保存的变更不会被索引
• 类名含动态拼接：如 class="${prefix}-header" 或 :class="[prefix + '-header']"，CSS Peek 不解析运行时字符串，只匹配字面量
• CSS 作用域限制：Vue 的 <style scoped> 或 React 的 CSS Modules 生成了哈希类名，原始 .header 在源码中根本不存在 —— 此时应改用框架自带的样式跳转（如 Volar 的 Go to Definition）

检查方法：在 CSS 文件里手动搜索 .header，能搜到才说明 CSS Peek 有依据可查。

PigX UI 前端开发

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

下载

立即学习“前端免费学习笔记（深入）”；

别让 Auto Rename Tag 在 JSX 里翻车

它默认支持 JSX，但有个关键开关常被忽略：auto-rename-tag.activationOnLanguage 必须显式包含 jsx，否则在 .tsx 或 .jsx 文件里完全不生效。

• 典型错误：改了 <Button onClick={...}> 却没同步更新闭合标签，结果报错 JSX element type 'Button' does not have any construct or call signatures
• 正确配置（settings.json）："auto-rename-tag.activationOnLanguage": ["html", "xml", "vue", "javascriptreact", "typescriptreact"]
• 注意点：javascriptreact 对应 .jsx，typescriptreact 对应 .tsx，不能只写 jsx —— VS Code 内部语言 ID 并非文件后缀
• 兼容性影响：开启后对 Vue SFC 的 <template> 块也生效，无需额外配置

Path Intellisense 找不到 @/components 别名？先看 jsconfig.json

插件本身不读取 Webpack/Vite 配置，它只认 jsconfig.json 或 tsconfig.json 里的 baseUrl 和 paths。

• 错误现象：输入 import Header from "@/components/Header.vue"，按下 Ctrl+Space 没提示，但项目实际能跑 —— 说明构建工具配置了别名，但 VS Code 插件没同步
• 必须补全的配置（放在项目根目录）：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    }
  }

• 路径差异：Path Intellisense 只处理导入路径，不处理 src 或 href 属性里的相对路径（那些靠 HTML Boilerplate 或 Auto Close Tag 处理）
• 容易踩的坑：Mac/Linux 下路径区分大小写，src/components 和 src/Components 是两个目录，插件提示会直接消失

真正卡住人的从来不是插件装不装，而是每个插件背后那几行不起眼的配置是否对齐了项目实际结构。