How do I implement the inline ghost code suggestion feature in a VS Code Extension?

Question

I am creating a VS Code extension in which I wish to implement the feature of showing the suggested code as ghost text which is inline on the text editor and the user may press Tab to confirm/add the code.

The following is the code for VS Code extension and my VS Code version is 1.83.1.

const vscode = require('vscode');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
    // Register the completion item provider
    context.subscriptions.push(
        vscode.languages.registerCompletionItemProvider(
            { scheme: "file", language: "javascript" },
            {
                provideCompletionItems: (document, position, token, context) => {
                    // Check if the trigger string is being typed
                    const linePrefix = document.lineAt(position).text.substr(0, position.character);
                    if (!linePrefix.endsWith("myTriggerString")) {
                        return undefined;
                    }

                    // Create a completion item for the ghost text
                    const suggestion = new vscode.CompletionItem("myGhostText");
                    suggestion.kind = vscode.CompletionItemKind.Snippet;
                    suggestion.insertText = new vscode.SnippetString("console.log('Hello, World!');");
                    suggestion.detail = "Inserts a console.log statement with 'Hello, World!' as the message.";

                    return [suggestion];
                },
            },
            "m"
        )
    );
}

function deactivate() { }

module.exports = {
    activate,
    deactivate
}

However when I run the extension using vs code and write myTriggerString, nothing is getting suggested. Any ideas what can be the issue? The feature needs to be similar to what github copilot or other AI tools exhibit for code completion.

Answer 1

The (currently proposed) API you want is inlineCompletionsAdditions. If you look at the extension manifest for the GitHub Copilot extension (you need to download the VSIX, rename its filename extension from ".vsix" to ".zip", unzip it, and then read the package.json file), you'll see that that's what it uses in its enabledApiProposals property.

To register the InlineCompletionItemProvider, use registerInlineCompletionItemProvider. In your provider, implement provideInlineCompletionItems. For using extension API proposals, see https://code.visualstudio.com/api/advanced-topics/using-proposed-api.