VS Code Bookmarks

A VS Code extension that allows you to set, remove, and manage bookmarks within your projects with persistent JSON storage. Set and navigate bookmarks with keyboard shortcuts, right-click menu, and sidebar view. Persistent storage with custom labels.

✨ Features

• Quick Bookmarking: Toggle bookmarks with a single keyboard shortcut (Ctrl+Shift+B)
• Persistent Storage: Bookmarks are saved in .react-book-marks/bookmarks.json in your workspace
• Visual Indicators: Bookmark icons appear in the editor gutter
• Sidebar View: Browse all bookmarks organized by file in the Explorer sidebar
• Optional Labels: Add descriptive labels to your bookmarks for better organization
• Navigation: Jump between bookmarks using keyboard shortcuts
• Edit Tracking: Bookmarks follow text insertions and deletions in open documents
• Categories: Organize bookmarks as TODO, Bug, Important, Idea, Reference, Review, Question, or Performance
• Folder Operations: Renaming or deleting a file or folder in VS Code updates its bookmarks
• Context Menus: Right-click in the editor to toggle bookmarks

🚀 Usage

Adding Bookmarks

1. Toggle Bookmark (Recommended):

   • Place cursor on the line you want to bookmark
   • Press Ctrl+Shift+B (or Cmd+Shift+B on Mac)
   • Press again to remove the bookmark

2. Add Bookmark with Label:

   • Open Command Palette (Ctrl+Shift+P)
   • Run Bookmarks: Add Bookmark
   • Enter an optional label to describe the bookmark

Viewing Bookmarks

Bookmarks Sidebar

The extension adds a dedicated "Bookmarks" view to the Explorer sidebar:

• Location: Find it in the Explorer panel (left sidebar)
• Organization: Bookmarks are grouped by category, then file, by default. Use Toggle Grouping Mode in the view title bar to switch to file grouping
• File Counter: Each file shows the number of bookmarks it contains, e.g., (3)
• Current Bookmark: When your cursor is on a bookmarked line, that bookmark shows "← Current" in the sidebar
• Click to Navigate: Click any bookmark to jump directly to that location
• Auto-Update: The view updates automatically as you add, remove, or navigate between bookmarks

Sidebar Features

• Expandable File Groups: Click to expand/collapse bookmarks by file
• Line Numbers: Each bookmark shows its line number
• Labels: Custom labels appear next to line numbers
• Visual Icons:
  • 📄 File icon for grouped files
  • 🔖 Bookmark icon for individual bookmarks
  • Clear all button (🗑️) in the sidebar title bar

Other Viewing Options

• Quick Pick List: Press Ctrl+Shift+P → "Bookmarks: List All Bookmarks" to see all bookmarks in a searchable list
• Gutter Icons: Bookmark icons appear in the editor's left margin

Managing Bookmarks

Right-Click Context Menu

Right-click anywhere in the editor to access bookmark commands:

1. Toggle Bookmark - Add or remove a bookmark at the current line
2. Jump to Next Bookmark - Navigate to the next bookmark in your project
3. Jump to Previous Bookmark - Navigate to the previous bookmark
4. Edit Bookmark Label - Add or modify the label for the bookmark at the current line
5. Clear All Bookmarks - Remove all bookmarks with confirmation dialog

All bookmark commands are grouped together in the context menu for easy access.

Sidebar Context Menu

Right-click a bookmark in the sidebar to:

• Edit Bookmark Label - Change the bookmark's description
• Remove Bookmark - Delete the bookmark (X button also available inline)

Managing All Bookmarks

• Clear All: Click the clear icon (🗑️) in the Bookmarks sidebar title bar
  • A confirmation dialog will appear before deletion
• Persistence: All bookmarks are automatically saved to .react-book-marks/bookmarks.json

⌨️ Keyboard Shortcuts

📂 Storage Location

Bookmarks are stored in .react-book-marks/bookmarks.json at the root of your workspace. This folder uses relative file paths for portability.

Note: It's recommended to add .react-book-marks/ to your .gitignore file to keep bookmarks local to each developer.

🛠️ Commands

All commands are available from the Command Palette (Ctrl+Shift+P):

• Bookmarks: Toggle Bookmark - Add or remove bookmark at current line
• Bookmarks: Add Bookmark - Add bookmark with optional label
• Bookmarks: Remove Bookmark - Remove bookmark at current line
• Bookmarks: List All Bookmarks - Show quick pick list of all bookmarks
• Bookmarks: Clear All Bookmarks - Remove all bookmarks (with confirmation)
• Bookmarks: Jump to Next Bookmark - Navigate to next bookmark
• Bookmarks: Jump to Previous Bookmark - Navigate to previous bookmark
• Bookmarks: Edit Bookmark Label - Edit label for bookmark at current line
• Bookmarks: Edit Bookmark Category - Change the category at the current line or from the sidebar
• Bookmarks: Toggle Grouping Mode - Switch between category and file grouping

Navigation and Editing

Next and previous commands visit bookmarks by file path, then line number, and wrap at the ends. They also work when the active file has no bookmarks.

Bookmarks follow edits in open documents, including multiple simultaneous edits. If bookmarked text is replaced or deleted, its bookmark stays at the replacement start. Labels and categories are preserved.

Edits made while VS Code is closed cannot be tracked. Saved positions beyond the end of a shortened file are skipped when rendering decorations; jumping to one uses the nearest valid position. Remove or recreate such bookmarks to update their stored location.

📋 Requirements

• VS Code version 1.90.0 or higher

🐛 Known Issues

• Storage uses the first workspace folder. Multi-root workspaces do not have independent stores per folder.
• Without an open workspace folder, bookmarks last only for the current session.
• File and folder rename/delete tracking applies to operations performed through VS Code. Changes made externally while the extension is inactive cannot be tracked.

📝 Release Notes

0.0.16

• Bookmarks follow document edits.
• Fixed navigation between files and bookmark handling for folder renames/deletions.
• Shortened files with stale saved bookmarks no longer break decoration rendering or activation.
• Added regression tests and refreshed release packaging.

See CHANGELOG.md for the complete history.

Development and Validation

Use Node.js 22 or later and Yarn 4. Install dependencies with yarn install, then run:

yarn compile
yarn lint
yarn test

Tests run in an isolated VS Code Extension Development Host and download VS Code on the first run. They cover navigation, edit tracking, file/folder operations, persistence, stale decorations, and activation.

See PublishingGuide.md for release and VSIX packaging steps.

📄 License

This extension is provided as-is for use in VS Code.

Enjoy bookmarking! 🔖

Support

If you like my work, you can support me here: