Bono [Bookmarks + Notes] for VS Code

Bono is a overengineered VS Code extension for bookmarking important code lines and attaching notes to them. It helps you organize bookmarks into groups and sub-groups, add workflow statuses to notes, customize gutter icons and line highlights, and navigate back to the correct code even after common edits and line shifts.

Features at a Glance

How to Use Bono

Toggle a Bookmark

1. Open any file in VS Code.
2. Put the cursor on the line you want to bookmark.
3. Run BN: Toggle Bookmark from the Command Palette or press:

Run the same command again on the bookmarked line to remove it.

Navigate Between Bookmarks

Use keyboard shortcuts:

Navigation can stay in the same file or jump across files depending on:

{
  "bonoExtension.allowCrossFileJump": true
}

Create and Use Groups

Groups let you organize bookmarks by task, feature, bug, review, or priority.

Common examples:

Todo
Fix
Review
Feature/Auth
Feature/Auth/API
Feature/Auth/UI

How to use:

1. Open the Bookmarks view.
2. Create a group using BN: Create Group.
3. Select a group as active using BN: Set Active Group.
4. New bookmarks are added to the active group.
5. Use BN: Create Sub-group to create nested folders.
6. Use move/rename/delete/pin/hide commands from the tree item context menu.

The active group is shown with the configured marker, default:

{
  "bonoExtension.activeGroupMarker": "⭐"
}

Move, Reorder, Cut, and Paste Tree Items

Inside Bono tree views:

Supported tree workflows include moving bookmarks between groups, reordering bookmarks, reordering groups, and working with nested group folders.

Add Notes to Bookmarks

A bookmark can have a note attached to it.

Common ways to work with notes:

1. Select a bookmark in the tree.
2. Run BN: Open Notes Manager (Bookmark).
3. Add or edit the note text.
4. Set a workflow status such as WIP, Blocked, or Completed.
5. Use the Notes Manager to search, filter, edit, restore, or delete notes.

Notes can be edited inline in the sidebar preview or in a side-by-side editor depending on:

{
  "bonoExtension.notesEditMode": "inline"
}

Use Note Statuses

Default note statuses:

Useful status settings:

{
  "bonoExtension.notes.defaultStatus": "inQueue",
  "bonoExtension.notes.enableStatus": true,
  "bonoExtension.notes.statusDisplay": "abbreviation"
}

Recover Notes with Drafts and Recycle Bin

Bono can protect note data when bookmarks or source lines are removed.

Deletion policy setting:

{
  "bonoExtension.notes.deletionPolicy": "preserveAndAutoRelink"
}

Options:

Recycle bin retention:

{
  "bonoExtension.notes.recycleBinRetentionSeconds": 2592000
}

Set it to 0 to disable automatic recycle-bin cleanup.

Search Bookmarks

Use these commands:

Shortcut in Bono tree views:

Export and Import

Use export/import when you want to backup, transfer, or restore your bookmark and note data.

Bookmark Tracking Settings

These settings control how Bono keeps bookmarks attached to the right line.

{
  "bonoExtension.bookmarkThisLine": true,
  "bonoExtension.bookmarks.smartStructuralContext": true
}

Navigation Settings

{
  "bonoExtension.scrollAnimation": "all",
  "bonoExtension.horizontalScrollOnJump": "dynamic",
  "bonoExtension.flashHighlight": true,
  "bonoExtension.allowCrossFileJump": true
}

Group and Tree Settings

{
  "bonoExtension.sidebarUI": "workspace",
  "bonoExtension.viewLocation": "sidebar",
  "bonoExtension.activeGroupMarker": "⭐",
  "bonoExtension.hiddenGroupDisplay": "both",
  "bonoExtension.treeIndent": 8
}

Default groups:

{
  "bonoExtension.defaultGroups": [
    { "name": "Todo", "color": "#29B6F6" },
    { "name": "Fix", "color": "#FF7043" },
    { "name": "Review", "color": "#AB47BC" }
  ]
}

Color and Theme Settings

Bono supports hex colors and CSS linear gradients.

{
  "bonoExtension.groupColors": {
    "Fix": "#FF7043",
    "Review": "linear-gradient(90deg, #7c4dff, #00b8d4)"
  },
  "bonoExtension.colorTheme.active": "none",
  "bonoExtension.colorTheme.showBuiltinThemes": true,
  "bonoExtension.colorTheme.updateDefaultColors": true
}

Built-in theme families include:

Default Pastels
Ocean Breeze
Sunset Glow
Forest
Galaxy
Neon Night
Monochrome
Candy
Fire & Ice
Aurora Borealis
Autumn Harvest
Tropical
Aurora Gradients
Sunset Gradients
Ocean Gradients

Line Highlight Settings

{
  "bonoExtension.lineHighlight": true,
  "bonoExtension.lineHighlightStyle": "outline",
  "bonoExtension.opacity": 0.3,
  "bonoExtension.opacityStep": 0.05
}

Commands:

Gutter Icon Settings

{
  "bonoExtension.gutterIcon.bookmark": "ribbon",
  "bonoExtension.gutterIcon.note": "note",
  "bonoExtension.gutterIcon.bookmarkWithNote": "dynamic-notes-icon",
  "bonoExtension.gutterIcon.customMode": "single",
  "bonoExtension.gutterIcon.customSvg": "",
  "bonoExtension.gutterIcon.customGroupSvgs": {}
}

Bookmark icon options:

ribbon
star
tag
heart
ribbon3d
star3d
tag3d
heart3d
ribbonOutline
starOutline
tagOutline
heartOutline
ribbonBorder
starBorder
tagBorder
heartBorder
custom

Note icon options:

note
note3d
noteOutline
noteBorder
custom
dynamic
dynamic-notes-icon

Bookmark-with-note icon options include the bookmark icon options plus:

dynamic
dynamic-notes-icon

Custom SVG example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
  <path fill="{color}" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01z"/>
</svg>

Use {color} to inject the group color.

Tree Icon and Hover Settings

{
  "bonoExtension.showBookmarkIconInTree": true,
  "bonoExtension.showGroupIconInTree": true,
  "bonoExtension.showBookmarkHover": true
}

Inline Action Settings

Choose which buttons appear inline on tree items. Actions not shown inline remain available from menus/commands.

{
  "bonoExtension.bookmarkInlineActions": ["rename", "delete"],
  "bonoExtension.groupInlineActions": ["moveUp", "moveDown", "hide"]
}

Bookmark inline action options:

notes
delete
rename
moveUp
moveDown
hide

Group inline action options:

moveUp
moveDown
hide
rename
delete
notes
color

Notes Manager Settings

{
  "bonoExtension.notesEditMode": "inline",
  "bonoExtension.autoSaveNotes": false,
  "bonoExtension.notes.lineHighlight": true,
  "bonoExtension.notes.cursorHighlight": false,
  "bonoExtension.notesManager.showLocation": true,
  "bonoExtension.notesManager.showLinkedLine": true,
  "bonoExtension.notesManager.showCodePreview": true,
  "bonoExtension.notesManager.showCardShadows": true,
  "bonoExtension.notesManager.hoverColor": "blue",
  "bonoExtension.notesManager.saveCodeLensStyle": "autosave"
}

Note Status Settings

You can customize the status list.

{
  "bonoExtension.notes.statuses": [
    {
      "value": "inQueue",
      "label": "In Queue",
      "icon": "circle-outline",
      "abbreviation": "Q",
      "symbol": "○",
      "color": "#78909c",
      "description": "Queued for future work."
    },
    {
      "value": "wip",
      "label": "WIP",
      "icon": "sync",
      "abbreviation": "WIP",
      "symbol": "↻",
      "color": "#ffb300",
      "description": "Work in progress."
    }
  ],
  "bonoExtension.notes.defaultStatus": "inQueue",
  "bonoExtension.notes.enableStatus": true,
  "bonoExtension.notes.statusDisplay": "abbreviation"
}

Status object fields:

Display Template Settings

Bono lets you customize bookmark labels in tree views.

{
  "bonoExtension.workspaceBookmarkTemplate": "{ifText:{text}}{ifNotText:{fileName}:{lineNo} {content}} | {ifNote:📝 {note}}",
  "bonoExtension.activeBookmarkTemplate": "{prefix}{lineNo} {content} | {ifNote:📝 {note}}"
}

Placeholders:

Conditional blocks:

{ifText:{text}}
{ifNotText:{fileName}:{lineNo} {content}}
{ifNote:📝 {note}}
{ifNotNote:No note}

Command Reference

Keyboard Shortcuts

Deprecated / Compatibility Settings

These settings still exist for compatibility, but new users should prefer the newer settings shown above.