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

orange
  • 2
新手上路,请多包涵

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

image.png

我有两个思路,一是在这个位置添加一列;二是修改行号,对行号进行修饰,用 “指令+行号” 代替原本的行号。但我不知道怎么做,翻查了很久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);

效果是这样子的:
image.png
在第10行(行号从0开始)的地方,在代码的编辑器区域添加了我想插入的字符,但我的本意是在行号数字的前面插入,不知道怎么才能做到?

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

image.png

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

很着急,希望大家可以帮帮忙,谢谢!

回复
阅读 653
1 个回答
orange
  • 2
新手上路,请多包涵

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

一个可参考的插件:

https://marketplace.visualstu...

这样子的效果:
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏