Webview 是 VSCode 扩展中实现富交互前端界面的核心机制，支持内联 HTML/CSS/JS、本地静态资源、React 构建产物及官方 Webview UI Toolkit 四种定制化方案。
如果您在开发 VSCode 扩展时需要向用户展示富交互的前端界面，Webview 是核心机制；但默认 Webview 缺乏样式控制与结构化 UI 组件支持，需手动集成现代前端方案实现定制化视觉与行为。以下是实现自定义 UI 的多种方法：
本文运行环境：MacBook Pro，macOS Sequoia。
一、使用内联 HTML + CSS + JavaScript 直接注入
此方法通过 webview.html 属性直接拼接完整 HTML 字符串，将样式与脚本内联嵌入，适合轻量、静态且无需构建流程的 UI 场景。
1、在扩展主文件中调用 vscode.webviewView.createWebviewPanel 或 vscode.window.createWebviewPanel 创建 webview 实例。
2、设置 webview.options 启用本地资源加载权限，包括 enableScripts: true 和 localResourceRoots。
3、为 webview.html 属性赋值，字符串中包含