我如何使用摩纳哥将自动完成添加到基于浏览器的编辑器

Question

所以最近我想使用 monaco 和 antlr 为自定义语言创建一个基于浏览器的编辑器。我遵循了这个很棒的教程 https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr/ .

Monaco 已经在按下 ctrl + space 时提供建议，但我想在 monaco 中添加智能自动完成（如智能感知）。我该怎么做？

Answer 1

强烈推荐Mike Lischke's C3 Code completion

另请参阅 Strumenta Tutorial on using C3 Code completion

Whosebug 答案中包含的细节有点多，但教程很好。

Monaco 使用 LSP（语言服务器协议）。不难找到有关如何将 LSP 插件绑定到 Monaco 的说明。至于如何在 LSP 插件中完成代码完成，this tutorial (once again on the Strumenta site)（特别是“基础”部分，涵盖了如何绑定到 LSP 代码完成挂钩）。

Answer 2

Monaco 支持注册自己的完成提供程序。这是按语言注册，但适用于所有编辑器实例。使用您的提供商实例调用 languages.registerCompletionItemProvider。

提供程序 class 本身非常简单。类似于：

export class CodeCompletionProvider implements languages.CompletionItemProvider {

    public readonly triggerCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.\@(".split("");

    public provideCompletionItems(model: ITextModel, position: Position, context: CompletionContext,
        token: CancellationToken): ProviderResult<CompletionList> {

            return {
                incomplete: false,
                suggestions: this.createInternalCompletionItems(replaceRange, model.editorMode),
            };
        }

        return services.getCodeCompletionItems(sourceContext, position);
    }

    public resolveCompletionItem(item: CompletionItem, token: CancellationToken): ProviderResult<CompletionItem> {

        return item;
    }

}

真正的工作是生成完成项。一种方法是使用我的 antlr4-c3 code 完成核心并用逻辑修改它以创建和使用符号 table 来提供符号信息。

我如何使用摩纳哥将自动完成添加到基于浏览器的编辑器

How can i add auto completion to a browser based editor using monaco

antlr

autocomplete

editor

typescript

monaco-editor