如何在VSCode中切换自定义HTML视图与原始类XML视图？

要实现类似IntelliJ处理Markdown的编辑/预览切换，核心是利用VSCode的自定义编辑器API和vscode.openWith命令，让同一文件在文本编辑器（编辑类XML内容）和自定义Webview编辑器（渲染HTML预览）之间切换。以下是具体实现步骤：

1. 注册自定义编辑器与切换命令 #

首先在package.json中注册自定义预览编辑器、切换模式的命令，同时关联你的目标文件类型（比如.yourlang）：

"contributes": {
  "customEditors": [
    {
      "viewType": "your-extension.html-preview",
      "displayName": "HTML Preview",
      "selector": [{"filenamePattern": "*.yourlang"}],
      "priority": "option" // 设为可选，不强制替代默认文本编辑器
    }
  ],
  "commands": [
    {
      "command": "your-extension.switch-to-edit",
      "title": "Switch to Edit Mode"
    },
    {
      "command": "your-extension.switch-to-preview",
      "title": "Switch to Preview Mode"
    }
  ],
  "menus": {
    "editor/title": [
      // 编辑模式下显示切换到预览的按钮
      {
        "command": "your-extension.switch-to-preview",
        "when": "editorLangId == your-custom-lang && activeEditor == textEditor",
        "group": "navigation"
      },
      // 预览模式下显示切换到编辑的按钮
      {
        "command": "your-extension.switch-to-edit",
        "when": "activeEditor == customEditor && customEditorId == your-extension.html-preview",
        "group": "navigation"
      }
    ]
  }
}

注意替换your-extension、your-custom-lang、.yourlang为你实际的扩展ID、语言ID和文件后缀。

2. 实现HTML预览的自定义编辑器 #

创建自定义编辑器提供者，负责将类XML内容转换为HTML并渲染到Webview：

import * as vscode from 'vscode';

export class HtmlPreviewProvider implements vscode.CustomTextEditorProvider {
  public static readonly viewType = 'your-extension.html-preview';

  static register(context: vscode.ExtensionContext): vscode.Disposable {
    return vscode.window.registerCustomEditorProvider(
      this.viewType,
      new HtmlPreviewProvider(context),
      { supportsMultipleEditorsPerDocument: false }
    );
  }

  constructor(private readonly context: vscode.ExtensionContext) {}

  async resolveCustomTextEditor(
    doc: vscode.TextDocument,
    panel: vscode.WebviewPanel,
    _token: vscode.CancellationToken
  ): Promise<void> {
    // 配置Webview权限
    panel.webview.options = {
      enableScripts: true,
      localResourceRoots: [this.context.extensionUri]
    };

    // 初始渲染HTML
    this.updatePreview(doc, panel.webview);

    // 监听文档变更，实时更新预览
    const docChangeSub = vscode.workspace.onDidChangeTextDocument(e => {
      if (e.document.uri.toString() === doc.uri.toString()) {
        this.updatePreview(e.document, panel.webview);
      }
    });

    panel.onDidDispose(() => docChangeSub.dispose());
  }

  // 核心：将类XML内容转换为HTML并更新Webview
  private updatePreview(doc: vscode.TextDocument, webview: vscode.Webview) {
    const xmlContent = doc.getText();
    // 替换为你的类XML转HTML逻辑
    const html = this.convertXmlToHtml(xmlContent);
    webview.html = html;
  }

  private convertXmlToHtml(xml: string): string {
    // 示例：简单转义XML标签并渲染，实际替换为你的转换逻辑
    return `
      <!DOCTYPE html>
      <html>
        <body style="padding: 16px;">
          <h2>HTML Preview</h2>
          <div>${xml.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
        </body>
      </html>
    `;
  }
}

3. 实现切换命令逻辑 #

在扩展激活函数中注册切换命令，利用vscode.openWith命令指定不同编辑器打开同一文件：

export function activate(context: vscode.ExtensionContext) {
  // 注册自定义预览编辑器
  context.subscriptions.push(HtmlPreviewProvider.register(context));

  // 切换到编辑模式（默认文本编辑器）
  context.subscriptions.push(vscode.commands.registerCommand(
    'your-extension.switch-to-edit',
    async () => {
      const activeEditor = vscode.window.activeTextEditor;
      if (!activeEditor) return;
      await vscode.commands.executeCommand('vscode.openWith', activeEditor.document.uri, 'default');
    }
  ));

  // 切换到预览模式（自定义编辑器）
  context.subscriptions.push(vscode.commands.registerCommand(
    'your-extension.switch-to-preview',
    async () => {
      const activeEditor = vscode.window.activeTextEditor;
      if (!activeEditor) return;
      await vscode.commands.executeCommand('vscode.openWith', activeEditor.document.uri, HtmlPreviewProvider.viewType);
    }
  ));
}

关键细节 #

• 确保你已经正确注册了自定义语言ID，这样when条件才能准确匹配目标文件
• 自定义编辑器的priority: "option"很重要，避免强制覆盖默认文本编辑器
• 如果需要实时预览，一定要监听onDidChangeTextDocument事件更新Webview

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