vscode 插件怎么实现编辑器行号处添加图标标记

我做的是一个收藏夹插件，可以创建不同工作空间，保存文件或文件夹路径。

现在想加个书签功能，怎么像 bookmarks 插件一样在行号处添加图标标记。

效果

首先在 package.json 里添加行号处右键的命令

"editor/lineNumber/context": [{"command": "favourite.addToBookmark","group": "5_favourite"},{"command": "favourite.addToNameBookmark","group": "5_favourite"},{"command": "favourite.deleteBookmarks","group": "5_favourite"}
],"commands": [{"command": "favourite.addToBookmark","title": "添加到收藏夹书签"},{"command": "favourite.addToNameBookmark","title": "删除收藏夹书签"}
]

注册命令

vscode.commands.registerCommand('favourite.addToBookmark', async ({ lineNumber, uri }: { lineNumber: number, uri?: vscode.Uri }) => {const deco = vscode.window.createTextEditorDecorationType({gutterIconPath: vscode.Uri.parse('data:image/svg+xml;base64,PHN2ZyB02Zz4=')})const start = new vscode.Position(lineNumber - 1, 0);const end = new vscode.Position(lineNumber - 1, 5);const range = new vscode.Range(start, end)vscode.window.activeTextEditor.setDecorations(deco, [range])
})

其中 PHN2ZyB02Zz4= 这个要换成你的 16*16 svg 图片的 base64 转换后的代码。

启动你的插件打开一个文件，在行号处右键添加到收藏夹书签就会出现了。