自定义 VSCode 扩展：在 webview 中嵌入本机编辑器

Question

目标

我想要一个嵌入本机编辑器的 web 视图（见图）。嵌入部分不需要具有制表功能。拥有编辑器对象就足够了，我根据 Javascript 手动填充和更新。

题

那可能吗？我该怎么做？

背景

我想在我自己的 webview 中显示各种文件内容。这些内容应该是可编辑的并且具有 vscode 编辑器具有的所有功能（例如语法突出显示、多个光标、智能感知等）。充其量，第 3 方扩展也应该在其中工作。

我不想再次开始实现整个编辑器，所以我正在寻找一种嵌入编辑器的方法。

Answer 1

无法嵌入 VS Code 自带的本机编辑器。扩展 API 根本不支持它。

最接近的方法是将编辑器的代码导入到您的 web 视图中。该编辑器称为Monaco，可通过 npm 包获得monaco-editor。它支持 VS Code 编辑器提供的大部分（或全部？）功能，例如 IntelliSense。

但是，由于此编辑器不知道已安装的 VS Code 扩展、主题和配置选项，因此它的行为与本机编辑器不同。您也许可以通过手动传播配置选项和主题来改善用户体验，但这需要大量工作，并且对于其他事情（例如对语言服务器或第三方扩展的支持）来说可能是不可能的。