0

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

到现在为止我所做的——

  1. 创建语言支持的 vscode-extension，语言客户端和服务器由此启动。

  2. LSP 功能（如内容辅助、错误突出显示等）在独立的文件编辑器上运行良好。

  3. 我能够将 Monaco 编辑器嵌入到 HTML div 中基于图表的编辑器中，但没有一个 LSP 功能正在使用它。

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

4

1 回答 1

0

在这种情况下，嵌入式编辑器是一个完整的自己的实例，您必须像将其嵌入到独立网页中一样对其进行设置。这通常涉及为各种功能（悬停、代码建议、验证等）设置提供程序。让这些提供者调用你的 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）。

于 2021-04-21T14:35:10.597 回答