VSCode 扩展：我们如何使用 Monaco 编辑器来编辑内存中的字符串？答案

【问题标题】：VSCode Extension : How can we use Monaco editor to edit in-memory Strings?VSCode 扩展：我们如何使用 Monaco 编辑器来编辑内存中的字符串？
【发布时间】：2023-03-30 19:20:03
【问题描述】：

我正在构建一个 Vscode/Theia 扩展，以提供基于图表的自定义编辑器。在这些编辑器中，在某些事件（例如节点标签编辑）中，我需要向最终用户提供输入控件，他们可以在其中根据我们的自定义语法定义输入表达式。目的是为最终用户提供由 LSP 支持的完整编辑体验，而不是纯输入文本框。我的要求是有一个可重用的小部件，它看起来类似于 TextArea，但具有额外的 LSP 支持以帮助最终用户编写表达式。

到目前为止我做了什么-

创建语言支持的vscode-extension，语言客户端和服务器正在由此启动。
内容辅助、错误突出显示等 LSP 功能是在独立的文件编辑器上工作正常。
我可以将 Monaco 编辑器嵌入到基于图表的编辑器中 HTML div，但没有任何 LSP 功能对其起作用。

那么我们如何使用 Monaco 编辑器来编辑非文件资源，例如启用所有 LSP 功能的内存字符串？

【问题讨论】：

标签： vscode-extensions theia

【解决方案1】：

在这种情况下，嵌入式编辑器是一个完整的自己的实例，您必须像将其嵌入到独立网页中一样对其进行设置。这通常涉及为各种功能（悬停、代码建议、验证等）设置提供程序。让这些提供商调用您的 LSP 来完成繁重的工作（在 vscode 和您的 webview 之间来回传递消息）。

        languages.onLanguage(msg.id, () => {
            msg.loader().then((module: any) => {
                languages.setMonarchTokensProvider(msg.id, module.language);
                languages.setLanguageConfiguration(msg.id, module.languageConfiguration);
                languages.registerCompletionItemProvider(msg.id, new CodeCompletionProvider());
                languages.registerHoverProvider(msg.id, new HoverProvider());
                languages.registerSignatureHelpProvider(msg.id, new SignatureHelpProvider());
                languages.registerDocumentHighlightProvider(msg.id, new DocumentHighlightProvider());
                languages.registerDefinitionProvider(msg.id, new DefinitionProvider());
                languages.registerReferenceProvider(msg.id, new ReferencesProvider());
                languages.registerSelectionRangeProvider(msg.id, new SelectionRangeProvider());
                languages.registerDocumentFormattingEditProvider(msg.id, new FormattingProvider());
                languages.registerRenameProvider(msg.id, new RenameProvider());
            });
        });

msg 这是您的语言的语言贡献文件（在我的例子中是 msg.contribution.ts）。

【讨论】：

感谢@Mike，我们可以使用 vscode-languageclient API 为嵌入式编辑器创建 LSP 客户端吗？乍一看，它似乎与 vscode 扩展紧密集成。
不，我认为这不可能。在 web 视图中，您只能像在普通浏览器中一样使用 API（还有一些限制，例如无法访问周围的文档）。