Monaco Editor registerCompletionItemProvider removes the default local variable completion

Question

In Monaco Editor, using the standard initialization such as:

monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "csharp"
});

Will have an out-of-the-box local variables code completion. For example, using the standard initializaton above, and typing the code like this:

string testVariable = "This is a string";
int aValue = 123;

The Code Completion will recognize both "testVariable" and "aValue" variables and show them on the Code Completion list.

But, if we add a registerCompletionItemProvider to the initialization like this:

//Custom Code Completion function
function createCompleters() {
    return [
        {
            label: 'customFunction1',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My first Custom Function",
            insertText: 'customFunction1()'
        },
        {
            label: 'customFunction2',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My second Custom Function",
            insertText: 'customFunction2()'
        }
    ];
}
//Register the custom completion function into Monaco Editor    
monaco.languages.registerCompletionItemProvider('csharp', {
    provideCompletionItems: function(model, position) {
        return createCompleters();
    }
});
//Continue with the Standard initialization here...
monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "csharp"
});

Then, the local variables is not recognized anymore, only the registered functions are recognized.

How can I register the custom code completion but also still retain the local variables completion? Thanks!

Answer 1

You need to add something that can match with your functions. If you match all of it you will only find the functions that are in your createCompleters() function. I have yet to find out how to do searching based on what's found in the returned suggestions and also looking into the local variables. The code below works, try it in the playground and start typing "cu". I know this isn't the full answer but hopefully it gets you going.

//Custom Code Completion function
function createCompleters() {
    return [
        {
            label: 'customFunction1',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My first Custom Function",
            insertText: 'customFunction1()'
        },
        {
            label: 'customFunction2',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My second Custom Function",
            insertText: 'customFunction2()'
        }
    ];
}
//Register the custom completion function into Monaco Editor    
monaco.languages.registerCompletionItemProvider('csharp', {
    provideCompletionItems: function(model, position) {

        var textUntilPosition = model.getValueInRange({startLineNumber: position.lineNumber, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
        var match = textUntilPosition.match(/cu/gim);
        var suggestions = match ? createCompleters() : [];
        return {
            suggestions: suggestions
        };

        return createCompleters();
    }
});
//Continue with the Standard initialization here...
monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "csharp"
});

Answer 2

This comment on an open VSCode issue explains the issue well. TL;DR CompletionItems are taken from a list of providers, each of which is scored based on it's specificity to the language. OPs Provider is specific to 'csharp'. A possible solution is to change the registration from:

monaco.languages.registerCompletionItemProvider('csharp', {

to

monaco.languages.registerCompletionItemProvider('*', {

In my own case this allowed a mixture of my custom suggestions along side word-based suggestions. \o/