DevNote

Notes in your code.

GitHub · Issues · How to use · Install · Quick start

How to use

1. Select a portion of code in the editor, then create a note for that selection. DevNote remembers the file, line, and snippet so the note stays anchored to that code.
2. Whenever you need context again, open the Notes list in the sidebar, find the note, and navigate back to the exact code to read or edit what you wrote.
3. Notes support Markdown-style text and images—paste or add pictures so diagrams and screenshots sit beside the code they refer to.

DevNote is a Visual Studio Code extension that attaches these rich notes to specific lines in your project. Notes are stored in your workspace so they stay with the codebase—ideal for design decisions, TODOs, reviews, and documentation that belongs next to the code.

Table of contents

• How to use
• Features
• Installation
• Requirements
• Quick start
• Using DevNote
• Commands
• Keyboard shortcuts
• Where data is stored
• Right-to-left text (Persian / Arabic)
• Images
• Troubleshooting
• Development
• Publishing
• License

Features

Installation

From a .vsix file

1. Download or build devnote-*.vsix (see Development).
2. In VS Code: Extensions → ⋯ (Views and More Actions) → Install from VSIX… and choose the file.

From the Marketplace

DevNote Pro is published as MortezaDalil.DevNotePro.

• Open in browser: DevNote Pro on Visual Studio Marketplace
• In VS Code / Cursor: Extensions (Ctrl+Shift+X / ⌘⇧X) → search DevNote Pro or MortezaDalil → Install.

The internal marketplace id is DevNotePro because the short name devnote was already taken globally on the Marketplace.

Requirements

• VS Code 1.85 or newer (or a compatible editor such as Cursor that loads VS Code extensions).
• A folder workspace opened (File → Open Folder…). Notes are created under the workspace root only.

Quick start

1. Open a project folder in VS Code.
2. Open a source file and select a meaningful snippet of code (the selection is stored with the note).
3. Create a note using any of the following:
   • Command Palette (Ctrl+Shift+P / ⌘⇧P) → DevNote: Write Note
   • Right-click in the editor → Write Note (when text is selected)
   • Keyboard: Ctrl+Shift+N (Windows/Linux) or ⌘⇧N (Mac) — only when you have a selection
   • Notes view title bar: + (New Note from Selection). If nothing is selected, you’ll get a clear error telling you to select text first.
4. Fill in Title and Note, add images if you want, then Save.
5. Open the DevNote icon in the Activity Bar to see all notes; click a note to jump to its line.

Using DevNote

Activity Bar & sidebar

• Click the DevNote icon on the left to open the Notes view.
• Use + (next to Refresh) to start a new note from the current selection in the active editor.
• Use Refresh if you changed .DevNote on disk outside VS Code.

From the editor

• Gutter: Hover the pencil icon for a short preview and a link to Open note.
• Code Lens (line above the code): click to open that note.
• Context menu: Open Note appears when the cursor is on a line that already has a note.

Editing vs creating

• Write Note / + / shortcut always aims to create a new note for the current selection.
• To edit an existing note, use Open Note, the sidebar edit control, or the Code Lens / gutter link.

Commands

All commands appear under the category DevNote in the Command Palette.

Keyboard shortcuts

You can change shortcuts in File → Preferences → Keyboard Shortcuts and search for devnote.

Where data is stored

Everything lives under <your-workspace>/.DevNote/:

Add .DevNote/ to .gitignore if notes are private, or commit it if your team should share them.

Right-to-left text (Persian / Arabic)

Titles, note bodies, the code snippet panel, and sidebar titles use automatic direction when the text contains Arabic-script characters, so Persian and Arabic notes are readable RTL in the UI.

Images

• In the note editor, use Upload or paste an image from the clipboard.
• Click a thumbnail to open the image file in an editor tab (full preview).

Troubleshooting

Development

git clone https://github.com/mortezadalil/DevNote.git
cd DevNote
npm install
npm run compile

Press F5 in VS Code with this folder opened to launch an Extension Development Host and debug the extension.

Build a redistributable package:

npm run pack
# creates devnote-<version>.vsix

Publishing

1. Create a Marketplace publisher. The publisher field in package.json must match your publisher ID.
2. Create an Azure DevOps Personal Access Token with Marketplace (Manage) scope; login: npx @vscode/vsce login <publisher>.
3. Publish: npx @vscode/vsce publish, or upload the .vsix on the manage page.
4. Optional: add a 128×128 PNG as icon in package.json for the store listing.

License

MIT

Made for developers who want notes in their code.