Debug Annotate is a powerful VS Code extension designed to help you annotate your code during debugging, code reviews, or exploration. Leave notes right where they matter, view them in a dedicated list, and filter them with a robust search engine.
Features
📝 Add Notes Anywhere
Add Note: Use the Debug Annotate: Add Note command or context menu to add a note to the current line.
Persistent: Notes are saved in your workspace (.vscode/annotations.json) and persist across sessions.
Anchored: Notes are anchored to line content, so they stay attached even if you modify code around them.
🔍 Dedicated Notes View
Explorer Integration: Access all your notes in the "Debug Annotate" view in the Activity Bar / Explorer.
Code Preview: Hover over any note in the list to see a live preview of the code surrounding it.
Navigation: Click a note to instantly jump to the file and line.
🔎 Powerful Search & Formatting
Filter your notes instantly using the Search icon in the Notes view title.
Simple Search: Type fix to find notes containing "fix" or files named "fix...".
Extension Filter: Use ext:ts to show notes only in TypeScript files.
Filename Filter: Use file:utils to show notes only in files with "utils" in the path.
Exact Match: Use quotes "error:500" to search for literal strings containing special characters.
Combined: fix ext:ts file:auth limits results to "fix" notes in TS files within the auth module.
Configuration
Customize the appearance of your annotations in user/workspace settings:
Setting
Description
Default
debug-annotate.displayMode
How to display the annotation in the editor: 'inline' (end of line), 'codelens' (above line), or 'comment' (below line).
codelens
debug-annotate.showGutter
Show an icon in the gutter for lines with annotations.
false
debug-annotate.inline.color
Color of the inline annotation text. Can be a hex code or a theme color.
editorCodeLens.foreground
debug-annotate.inline.backgroundColor
Background color of the inline annotation text.
""
debug-annotate.inline.fontStyle
Font style of the inline annotation text.
italic
debug-annotate.inline.fontWeight
Font weight of the inline annotation text.
normal
debug-annotate.inline.margin
CSS margin for the inline annotation text.
0 0 0 3em
commands
Debug Annotate: Add Note: Add a note to the current line.
Debug Annotate: Edit Note: Edit the note at the current cursor position.
Debug Annotate: Remove Note: Remove the note at the current cursor position.
Debug Annotate: Search Notes: Open the search input for the notes view.
Debug Annotate: Clear Search: Clear the current search filter.
