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?

Oldest comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.