WebView Preview
在 VS Code 中直接预览前端应用的扩展工具，避免频繁切换浏览器查看本地开发服务器内容。
功能特性
- 内置 WebView 面板：通过命令
Preview Frontend in WebView 快速打开 WebView，嵌入本地前端应用（默认监听端口 5173，适配 Vite 等开发服务器）。
- 自动适配窗口：WebView 内容自动填充面板，支持隐藏时保留上下文（
retainContextWhenHidden: true）。
- 无缝集成：与 VS Code 开发流程深度整合，支持调试和热更新。
安装
- 在 VS Code 插件市场搜索
webview-preview（发布后可用）。
- 点击「安装」按钮完成安装。
使用说明
- 启动本地前端开发服务器（如 Vite 的
npm run dev）。
- 按下
Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows/Linux）打开命令面板。
- 输入
Preview Frontend in WebView 并执行，即可在左侧视图列看到 WebView 面板加载本地应用。
配置
若需修改监听端口（默认 5173），可直接编辑 src/extension.ts 中的 port 变量并重新打包扩展。
已知问题
- 暂不支持动态端口检测，需手动配置与开发服务器一致的端口。
版本记录
1.0.0
扩展指南
遵循 VS Code 扩展开发规范 开发，确保代码质量与兼容性。
更多信息
立即体验！
| |
