首页 > 解决方案 > 如何使用 monaco 将自动完成添加到基于浏览器的编辑器

问题描述

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

摩纳哥在按 ctrl + 空格时已经给出了建议,但我想在里面添加一个智能自动完成(如智能感知)monaco。我怎样才能做到这一点?

标签: typescriptautocompleteeditorantlrmonaco-editor

解决方案


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

提供者类本身非常简单。就像是:

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 代码完成核心并使用逻辑对其进行修改以创建和使用符号表来提供符号信息。


推荐阅读