DEV Community

Cover image for A multi-color bookmark plugin for your code
Deepak Pahawa
Deepak Pahawa

Posted on


A multi-color bookmark plugin for your code

We, being coder/programmer, spend most of our time in searching a piece of code in the entire codebase, navigating from one file to another tracing the functionality. To solve this problem (only for vscode editor), I have developed a plugin.

Multi Color Bookmark

This is a simple yet powerful vscode plugin to mark code and trace it back whenever required with a lot many functionalities to add, edit, or delete a bookmark or entire flow.

It provides the below feature:

  1. Add a bookmark with or without a flow name.
  2. Add quick bookmarks by just pressing ctrl+k (windows) or cmd+k (mac)
  3. Edit a bookmark like moving to another flow by changing flow name, changing index, or even bookmark name.
  4. Edit flow name.
  5. All bookmarks are sorted as per their index, makes it easy to navigate through the flow anytime. The index is editable.
  6. Clear a bookmark from the sidebar and command both.
  7. Clear All bookmarks at once from command only.
  8. Multi-color support. one of the 10 different colors will be assigned to each flow.
  9. All bookmarks for a flow will use a single color, which makes it easy to identify in the file.
  10. A sidebar to navigate through the bookmarks and files.
  11. Import all the bookmarks from the Bookmarks plugin

Add a Bookmark

  1. Open a file, click on any line where you want to add bookmark
  2. Press ctrl+shift+p (windows) or cmd+shift+p (mac)
  3. Type "add bookmark"
  4. Select "MCB: Add Bookmark"
  5. Enter bookmarkName, FlowName (optional), index(optional)
  6. Press ctrl+alt+k (windows) or cmd+alt+k (mac) for key shortcut


Add a quick Bookmark

  1. Open a file, click on any line where you want to add bookmark
  2. Press ctrl+k (windows) or cmd+k (mac) to add new bookmark in the last created/updated flow


Edit a Bookmark or Flow

  1. Go to Bookmark sidebar
  2. Click on pencil while hovering on any bookmark or any flow
  3. Change anything, bookmarkName, FlowName and/or index


Clear a Bookmark

  1. Select a line which has bookmark
  2. Press ctrl+shift+p (windows) or cmd+shift+p (mac)
  3. Type "clear bookmark"
  4. Select "MCB: Clear Bookmark" Or
  5. Clear the bookmark from the sidebar by clicking on close icon on the bookmark


Import from Bookmarks plugin

  1. Open settings.json by ctrl+p (windows) or cmd+p (mac)
  2. Add this statement in the settings.json. "bookmarks.saveBookmarksInProject": true
  3. It will create a bookmarks.json file in .vscode folder.
  4. Press ctrl+shift+p (windows) or cmd+shift+p (mac)
  5. Type "Import from bookmark"
  6. Select "MCB: Import from Bookmarks" and it will create the bookmarks in the sidebar.
  7. Edit the bookmarks as required.


Thank you for reading. I hope it will help you.

Please let me know your thoughts in the comments below. Do you find it useful?

Latest comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git