VSCode扩展开发：如何在编辑器内部添加自定义UI？

要实现类似Copilot Chat的编辑器内自定义跨多行UI，无需使用独立Webview标签页，核心是利用VSCode API提供的createWebviewTextEditorDecorationType，它支持将Webview内容作为装饰嵌入编辑器指定位置，完全满足你的需求。

实现步骤 #

1. 定义Webview装饰类型
   通过API创建装饰类型，配置UI的位置、尺寸等基础样式：

   const webviewDecoration = vscode.window.createWebviewTextEditorDecorationType({
     after: {
       contentText: '',
       width: '100%',
       margin: '12px 0',
       display: 'block'
     }
   });
   

   若要将UI放在激活行上方，将after替换为before即可。

2. 构建自定义Webview内容
   编写包含样式和内容的HTML，支持任意自定义布局：

   function getCustomUI() {
     return `
     <!DOCTYPE html>
     <html>
       <body style="padding: 10px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px;">
         <h4>自定义跨多行UI</h4>
         <p>这里可以添加任意HTML元素、样式甚至交互逻辑</p>
         <ul>
           <li>支持多行显示</li>
           <li>自定义样式不受编辑器主题限制</li>
         </ul>
       </body>
     </html>
     `;
   }
   

3. 绑定到激活行并更新
   监听编辑器激活行变化，将装饰应用到目标位置：

   // 监听编辑器切换和选中行变化
   vscode.window.onDidChangeActiveTextEditor(updateActiveLineUI);
   vscode.window.onDidChangeTextEditorSelection(e => updateActiveLineUI(e.textEditor));
   
   function updateActiveLineUI(editor?: vscode.TextEditor) {
     if (!editor) return;
     const activeLine = editor.selection.active.line;
     // 选中激活行的起始位置作为装饰锚点
     const targetRange = new vscode.Range(activeLine, 0, activeLine, 0);
     // 生成装饰配置
     const decorationItem = {
       range: targetRange,
       renderOptions: {
         after: { webviewContent: getCustomUI() }
       }
     };
     // 应用装饰到编辑器
     editor.setDecorations(webviewDecoration, [decorationItem]);
   }
   

4. 资源清理
   将装饰类型添加到扩展的订阅列表，确保扩展停用后自动销毁：

   context.subscriptions.push(webviewDecoration);
   

额外注意事项 #

• Webview内容支持与扩展主进程通信，可通过webview.postMessage和onDidReceiveMessage实现交互。
• 若需要动态更新UI内容，只需重新调用editor.setDecorations传入新的webviewContent即可。
• 可以通过CSS媒体查询适配编辑器的明暗主题，保证UI显示效果一致。

内容的提问来源于stack exchange，提问作者y777777