时间戳

首页 > 解决方案 > 我正在尝试对 vscode 的编辑区域进行一些有趣的更改。我想知道API是否支持以下两个功能？

visual-studio-code - 我正在尝试对 vscode 的编辑区域进行一些有趣的更改。我想知道API是否支持以下两个功能？

问题描述

一、vscode编辑区是否支持部分行的插入，仅作显示之用，不影响编辑区本身的属性，如行号不变。我知道Gitlens可以在某行之后显示作者的相关信息，现在我想将这些不可编辑的信息插入到单独的行中。

二、在调试时标记断点的编辑器区域（即行号左侧），是否可以新增一列显示该行对应的一些消息？或者我可以只修改行号，在它的左边添加一些字符吗？

找了好几天，也没有找到这样的接口可以调用。

谢谢。

标签： visual-studio-codevscode-extensions

解决方案

通过在代码库中实现 CodeLens 提供程序可以获得的第一个功能。这是一个示例：

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];
    }
}

关于第二个功能，您可以通过设置 gutterIcon 在行号前添加图标，这是我从我的代码库中提取的一个小片段，希望能给您一些提示；如何实现您的目标：

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);

注意：确保调整路径并设置适当的范围。为简单起见，我只推范围数组中的一个位置。如果您想对多行产生影响，请相应地添加更多范围。

推荐阅读