vscode 插件怎么实现编辑器行号处添加图标标记
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 转换后的代码。
启动你的插件打开一个文件,在行号处右键添加到收藏夹书签就会出现了。
更多推荐
所有评论(0)