VSCode扩展开发：新创建的自定义格式文件如何用自定义编辑器打开

workspace.openTextDocument 本质是打开文本类型的文档，默认会优先关联纯文本编辑器，不会主动触发自定义编辑器的匹配逻辑，而资源管理器点击文件时VS Code会完整走文件后缀对应的编辑器匹配规则，所以才会出现两边行为不一致的情况。

第一步：确认自定义编辑器ID #

先找到你扩展package.json中注册自定义编辑器的viewType值，示例配置如下：

{
  "contributes": {
    "customEditors": [
      {
        "viewType": "yourExtension.customFileEditor", // 该值为自定义编辑器唯一ID，记下来后续要用到
        "displayName": "自定义文件编辑器",
        "selector": [
          {
            "filenamePattern": "*.custom_file_format"
          }
        ]
      }
    ]
  }
}

第二步：修改打开文件的代码 #

不要使用openTextDocument + showTextDocument的组合，直接显式指定使用你的自定义编辑器打开即可，修改后的代码如下：

import { commands, Uri, window, workspace, ViewColumn } from 'vscode';
import * as path from 'path';

// 替换为你自己的自定义编辑器viewType
const CUSTOM_EDITOR_VIEW_TYPE = "yourExtension.customFileEditor";

window
  .showInputBox({
    prompt: "Enter name for file",
  })
  .then(async (title) => {
    if (!title) {
      return;
    }

    const fileContent = generateDefaultFileContent();
    // 直接构造Uri对象，避免跨平台路径解析异常
    const fileUri = folder.uri.with({
      path: path.join(folder.uri.path, `${title}.custom_file_format`)
    });

    // 写入文件
    await workspace.fs.writeFile(
      fileUri,
      Buffer.from(fileContent, "utf8")
    );

    // 方式1：调用vscode.open命令指定自定义编辑器打开，兼容性更好
    await commands.executeCommand('vscode.open', fileUri, {
      viewType: CUSTOM_EDITOR_VIEW_TYPE,
      viewColumn: ViewColumn.Active
    });

    // 方式2：直接调用showTextDocument指定viewType，两种方式二选一即可
    // await window.showTextDocument(fileUri, {
    //   viewType: CUSTOM_EDITOR_VIEW_TYPE,
    //   viewColumn: ViewColumn.Active
    // })
  });

如果修改后仍不生效，可以检查两个配置：

• 自定义编辑器的selector.filenamePattern确实正确匹配了你的文件后缀
• 自定义编辑器的注册逻辑没有异步延迟，确保打开文件时编辑器已经完成注册

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