React Book Marks
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
- Context Menus: Right-click in the editor to toggle bookmarks
🚀 Usage
Adding Bookmarks
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
Add Bookmark with Label:
- Open Command Palette (
Ctrl+Shift+P)
- Run
Bookmarks: Add Bookmark
- Enter an optional label to describe the bookmark
Viewing Bookmarks
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 file
- 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
- 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 anywhere in the editor to access bookmark commands:
- Toggle Bookmark - Add or remove a bookmark at the current line
- Jump to Next Bookmark - Navigate to the next bookmark in your project
- Jump to Previous Bookmark - Navigate to the previous bookmark
- Edit Bookmark Label - Add or modify the label for the bookmark at the current line
- Clear All Bookmarks - Remove all bookmarks with confirmation dialog
All bookmark commands are grouped together in the context menu for easy access.
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
| Command |
Windows/Linux |
Mac |
| Toggle Bookmark |
Ctrl+Shift+B |
Cmd+Shift+B |
| Next Bookmark |
Ctrl+Shift+N |
Cmd+Shift+N |
| Previous Bookmark |
Ctrl+Shift+Alt+N |
Cmd+Shift+Alt+N |
📂 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 lineBookmarks: Add Bookmark - Add bookmark with optional labelBookmarks: Remove Bookmark - Remove bookmark at current lineBookmarks: List All Bookmarks - Show quick pick list of all bookmarksBookmarks: Clear All Bookmarks - Remove all bookmarks (with confirmation)Bookmarks: Jump to Next Bookmark - Navigate to next bookmarkBookmarks: Jump to Previous Bookmark - Navigate to previous bookmarkBookmarks: Edit Bookmark Label - Edit label for bookmark at current line
📋 Requirements
- VS Code version 1.107.0 or higher
🐛 Known Issues
None at this time. Please report issues on the GitHub repository.
📝 Release Notes
0.0.1
Initial release of React Book Marks:
- Toggle bookmarks with keyboard shortcuts
- Persistent JSON storage
- Sidebar tree view
- Bookmark navigation
- Optional labels
- File rename/delete handling
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 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:
