我在做vscode扩展开发，编辑器的行号区域怎么修改？

Question

我在做一个编译功能，对源码编译完成后，希望可以在标记断点的地方与行号之间（下图紫色框），这个地方显示与源码对应的汇编指令。

我有两个思路，一是在这个位置添加一列；二是修改行号，对行号进行修饰，用 “指令+行号” 代替原本的行号。但我不知道怎么做，翻查了很久vscode API没有找到合适的接口。

我知道编辑器左侧区域有三个列，断点区域，行号，以及代码展开折叠的部分。不清楚是否能再加一列。

关于修改行号，我发现vscode中有一个文字修饰器。我写了个例子尝试：

    let activeEditor = vscode.window.activeTextEditor;
    const decoration = {
        before: {
            contentText: 'line test', 
            color: 'red',
        }
    }
    const fontColorDecorator = vscode.window.createTextEditorDecorationType(decoration);
    const range = { range: new vscode.Range(10, 0, 10, 0) }; // the line number is 10
    let ranges = [];
    ranges.push(range);
    activeEditor.setDecorations(fontColorDecorator, ranges);

效果是这样子的：

在第10行（行号从0开始）的地方，在代码的编辑器区域添加了我想插入的字符，但我的本意是在行号数字的前面插入，不知道怎么才能做到？

使用gutterIconPath可以在行号左侧插入图片，但仍然不能插入文字...

我查看vscode文档中与行号style相关的有一个设置，但是看起来并没有什么用。

很着急，希望大家可以帮帮忙，谢谢！

Answer 1

发现一个勉强可以使用的方法，还是使用插入图片的方案，图片格式使用svg，就可以显示数字了。不太好用，每次更新都需要新生成一个图片，而且数量庞大。

一个可参考的插件：

https://marketplace.visualstu...

这样子的效果：