Sticky Code - Notes & Change Tracker

"Comments without comments."

Attach rich context, explanations, and Markdown notes to specific lines or blocks of code without polluting your source files. The extension automatically tracks where code moves or changes, alerts you of changes, and displays a side-by-side diff.

Features

• 🔖 Margin Bookmark Icons & Line Highlights: Shows visual bookmark icons next to line numbers and highlights code lines that have sticky notes attached.
• ✨ Rich Markdown Note Editor: View, edit, rename, and delete notes in a dedicated tabbed webview with a Markdown toolbar, formatting shortcuts, and a live preview.
• 🤖 Shift & Relocation Tracking: Uses a robust Line Clustering Similarity Search (LCS matching) to find where your code went when lines shift or when checkout changes occur.
• ⚠️ Change Detection Alerts: Prompts you when code associated with notes is modified or deleted, offering quick options to "View Diff", "View Note", or "Dismiss" (acknowledge).
• 🔄 Side-by-Side Diff View: Uses VS Code's native diff editor to compare original selected code with current modified code.
• 📁 Explorer Sidebar TreeView: View all notes in your workspace grouped by file, labeled with their current status:
  • 🟢 Active: Code has not changed.
  • 🔵 Code Relocated: Code moved but was found.
  • 🟡 Code Modified: Code was modified but located.
  • 🔴 Code Not Found: Code was deleted or changed too much (manually reattach).
• 💾 Workspace Sharing: Save notes in .vscode/code-notes.json to share them with your team via Git, or set codeNotes.storageLocation to "local" to keep notes private.

Extension Settings

This extension contributes the following settings:

• codeNotes.storageLocation: Store notes in "workspace" (shared via Git) or "local" (hidden from Git).
• codeNotes.showGutterIcon: Toggle the margin bookmark icon next to line numbers.
• codeNotes.highlightLineBackground: Toggle editor line highlights.
• codeNotes.enableChangeNotifications: Toggle notifications when code drifts.

Keyboard Shortcuts

• Create code note: Ctrl + Alt + N (Windows/Linux) or Cmd + Alt + N (macOS).

Running Locally for Development

1. Open this repository folder in VS Code.
2. Run npm install in the terminal to fetch dependencies.
3. Build the extension code:
   • Run npm run compile to build once.
   • Run npm run watch to compile dynamically during editing.
4. Press F5 or select Run and Debug -> Launch Extension to open a new Extension Development Host window.
5. In the new window, select text and press Cmd + Alt + N or right-click and select Code Notes: Create Note to attach notes.

Running Tests

To execute the Mocha integration and unit tests:

npm run test

This runs a clean instance of VS Code in a sandbox and executes the tests in src/test/suite/extension.test.ts.

Packaging the Extension (.vsix)

To package the extension into a shareable .vsix file:

1. Ensure the packaging utility vsce is installed globally:

   npm install -g @vscode/vsce
   

2. Build the production package bundle:

   npm run package
   

3. Create the .vsix file:

   vsce package
   

4. Install the generated .vsix in your VS Code:
   • Open Extensions view (Cmd+Shift+X).
   • Click the ... menu at the top-right.
   • Select Install from VSIX... and select the packaged file.

Author & Developer

Shilpa Chauhan
Frontend Developer with ~2 years of experience specializing in React, JavaScript, TypeScript, Redux, and modern UI component libraries.

• GitHub: chauhanshilpa
• Repository: Sticky-Code