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

现在想加个书签功能,怎么像 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 转换后的代码。

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

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐