I am trying to make some interesting changes to the editing area of vscode. I want to know whether the API supports the following two features?

问题

First, does the vscode editor area support the insertion of some lines, only for display purposes, and does not affect the properties of the editing area itself, such as the line number unchanged. I know that Gitlens can display the relevant information of the author after a certain line, now I want to insert these non-editable information into separate lines.

Second, in the editor area where the breakpoint is marked during debugging (that is, to the left of the line number), can a new column be added to show some messages corresponding to the line? Or can I just modify the line number, add some characters to the left of it?

I have been searching for several days, and I have not found such an interface to call.

Thanks.

回答1:

The first feature you can have by implementing the CodeLens provider in your codebase. Here is a sample:

export class MyCodeLensProvider implements CodeLensProvider {
    async provideCodeLenses(document: TextDocument): Promise<CodeLens[]> {
        let location = new Range(0, 0, 0, 0)

        let codeLens = new CodeLens(location, {
            command: 'say.testCmd',
            title: 'Insert console here',
        })

        return [codeLens];
    }
}

Regarding the second feature, you can have icons before the line number by setting gutterIcon, here is a little snippet that I have extracted from my codebase, hope this will give you hint; how to achieve what you were looking:

const todoStyle = {
    text: "TODO:",
    color: '#fff',
    backgroundColor: '#ffbd2a',
    overviewRulerColor: 'rgba(255,0,42,0.8)',
    dark: {
        gutterIconPath: path.join(__filename, '..', '..', 'src', 'resources', 'dark', 'todo.png')
    }
}
const fontColorDecorator = vscode.window.createTextEditorDecorationType(style.todoStyle);

    /* Ranges */
    let ranges: vscode.Range[] = [];
    const startPos = new vscode.Position(lineNumber, characterPosition);
    const endPos = new vscode.Position(lineNumber, characterPosition); 
    let singleRange: vscode.Range = new vscode.Range(startPos, endPos);
    ranges.push(singleRange);

    activeEditor.setDecorations(fontColorDecorator, ranges);

Note: Make sure to adjust the path and set proper ranges. For simplicity, I am only pushing one position in the range array. If you want to have effects on multiple lines then add more ranges accordingly.

来源：https://stackoverflow.com/questions/62446749/i-am-trying-to-make-some-interesting-changes-to-the-editing-area-of-vscode-i-wa

标签

visual-studio-code

vscode-extensions