Visual Studio Code扩展开发：如何在扩展视图中展示本地代码

两个需求均可以实现，具体实现方案如下：

在自有扩展视图内展示本地代码 #

如果你使用的是扩展自定义Webview视图，可按以下方式实现：

• 通过Node.js原生fs模块读取本地磁盘代码文件的文本内容，无需调用VS Code专属API
• 若需要语法高亮能力，可在Webview中集成语法高亮工具直接渲染代码内容，可完全自定义展示样式
• 若要嵌入VS Code原生编辑器能力到自定义视图，可使用自定义编辑器API，注册对应的文件类型关联即可实现原生编辑体验内嵌

在扩展视图旁侧面板打开本地代码 #

该需求可直接调用VS Code官方原生API实现，无需自定义开发渲染逻辑：

• 先通过vscode.workspace.openTextDocument()传入本地文件的URI，读取文件内容生成文档实例
• 再调用vscode.window.showTextDocument()，传入参数vscode.ViewColumn.Beside，即可在扩展视图旁的侧面板打开文件，完全复用VS Code原生的语法高亮、代码编辑、跳转等能力

注意：如果需要读取当前工作区外的本地文件，需要在扩展的package.json中声明filesystem权限，避免触发VS Code的权限拦截。

示例代码 #

const vscode = require('vscode');
const path = require('path');

// 传入本地文件绝对路径即可在侧面板打开
async function openLocalFileInBesideColumn(fileAbsolutePath) {
    const fileUri = vscode.Uri.file(path.resolve(fileAbsolutePath));
    const doc = await vscode.workspace.openTextDocument(fileUri);
    await vscode.window.showTextDocument(doc, vscode.ViewColumn.Beside);
}

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