Visual Studio Code Custom Extension Line Based Note

Question

I am trying to create an extension for visual studio code, which requires the ability to annotate lines in a file similar to the references shown in the image, linked below.

I want to be able to add an annotation, such as the one shown in the red rectangle, without modifying the source code file. I would like to be able to do so for every line of the source file. I also want to be able to make dynamic modifications to the annotations' contents.

I have searched VSC's documentation as well as elsewhere. I have not found it. Can anyone guide me in the right direction please?

I know the following is incorrect, but I don't know where else to check for how it should be accomplished.

class TestCodeLensProvider implements vscode.CodeLensProvider {
    public provideCodeLenses(document: TextDocument, token: CancellationToken):
        CodeLens[] | Thenable<CodeLens[]> {
        return new Array<CodeLens>();
    }

    public resolveCodeLens?(codeLens: CodeLens, token: CancellationToken):
        CodeLens | Thenable<CodeLens> {
        return new CodeLens(new vscode.Range(new vscode.Position(1, 1), new vscode.Position(1, 2)),/*I also don't know how to specify my command here*/ );
    }
}

export function activate(ctx: vscode.ExtensionContext): void {
    ctx.subscriptions.push(
        vscode.languages.registerCodeLensProvider(
            'json', new TestCodeLensProvider()));

Answer 1

The feature in your screenshot is called "Code Lens". More specifcally, you're looking for the registerCodeLensProvider() function of the languages namespace . Or if you're writing a Language Server instead of using the VSCode API directly, the textDocument/codeLens request method .