Live Preview不是可编程Webview，因其仅封装为只读静态渲染器，禁用JS执行且不暴露Webview API；真要集成需手动开发扩展，调用createWebviewPanel并处理资源路径、文件监听与HTML重载。
Live Preview 为什么不是 Webview 集成的“实时预览”
VS Code 内置的 Live Preview 插件（作者 ms-vscode.live-preview）确实基于 WebView 渲染，但它**不暴露 Webview API 接口供用户直接调用**，也不允许你自定义面板、注入脚本或监听消息。它只是微软封装好的一个“只读静态渲染器”，连 console.log 都不执行，更别说 fetch() 或 localStorage。所谓“集成 Webview 窗口”，不是指用这个插件，而是指你自己写扩展，调用 vscode.window.createWebviewPanel 或 vscode.window.registerWebviewViewProvider。
如何手动创建一个可交互的 Webview 预览窗口
真要集成 Webview 做实时预览，得自己写扩展逻辑，核心是三步：
- 用
vscode.window.createWebviewPanel创建独立面板，设置enableScripts: true和localResourceRoots（否则./css/style.css会 404） - 在
webview.html中通过vscode.asWebviewUri()转换本地路径，例如：<link href="${vscode.asWebviewUri(cssPath)}" rel="stylesheet"> - 监听文件变更事件（
vscode.workspace.onDidChangeTextDocument），检测到 .html 修改后，重新生成 HTML 字符串并赋值给webview.html
注意：这不会自动刷新浏览器，而是靠你手动重载整个 Webview 内容；JS 执行上下文每次都会重建，localStorage 不保留，WebSocket 无法复用。
Live Server 和 Webview 面板能共存吗
可以，但它们解决的问题完全不同：
-
Live Server启动的是真实 HTTP 服务（http://127.0.0.1:5500），支持完整浏览器能力，适合验证交互逻辑 - 你自己写的 Webview 面板运行在 VS Code 的沙箱环境里，CSP 严格、无网络权限、无 DevTools，适合嵌入轻量 UI（比如组件属性编辑器、样式调试器）
- 两者端口不冲突，但别指望 Webview 面板里能
fetch('http://127.0.0.1:5500/api')——它默认禁止跨域请求，且没有代理配置入口
为什么官方不把 Live Preview 改成可编程 Webview
因为定位不同：Live Preview 是给 HTML/CSS 初学者快速看结构用的，强调零配置、低门槛；而 Webview API 是给扩展开发者用的，要求理解 CSP、nonce、资源 URI 转换等底层细节。微软刻意把这两层隔开——前者禁用 JS 是安全设计，后者开放脚本是功能必需。如果你需要“可编程的实时预览”，就得接受：没有一键方案，必须手写扩展逻辑，且每次保存 HTML 后，你要自己解析 DOM、提取 <style> 和 <script>，再拼进 Webview HTML 字符串里。这不是插件能帮你省掉的步骤。
