Quick File Notes
Attach personal notes to any file or folder directly from the VS Code Explorer.
✨ Features
| Feature |
Description |
| 📝 Right-click → Note |
Open note editor from Explorer context menu |
| 💾 Persistent Storage |
Notes survive restarts — stored in globalState |
| 📌 Bookmark Badge |
Files/folders with notes show a 📌 badge |
| 🔍 Hover Preview |
Hover over a noted file to preview the note |
| ✏️ Edit Existing Notes |
Re-open and update any saved note |
| 🗑️ Delete Notes |
Remove individual notes or clear all at once |
| 🌗 Theme-aware UI |
Webview adapts to dark and light VS Code themes |
🚀 Usage
Add / Edit a Note
- Right-click any file or folder in the Explorer panel.
- Click "Note" from the context menu.
- A side panel opens with a text editor.
- Type your note and click 💾 Save Note (or press
Ctrl+S).
View a Note
- Hover over any file showing a 📌 badge to see a note preview tooltip.
- Right-click and select "Note" to open the full editor.
Delete a Note
- Open the note editor and click 🗑️ Delete Note.
- Confirm the deletion in the dialog.
Clear All Notes
- Open the Command Palette (
Ctrl+Shift+P).
- Run
Quick File Notes: Clear All Notes.
⌨️ Keyboard Shortcuts (inside the note panel)
| Shortcut |
Action |
Ctrl+S |
Save note |
Ctrl+Enter |
Save note |
⚙️ Settings
| Setting |
Default |
Description |
quickFileNotes.showDecorations |
true |
Show 📌 badge on noted files |
quickFileNotes.showHoverPreview |
true |
Show note preview on hover |
🗂️ Project Structure
quick-file-notes/
├── src/
│ ├── extension.ts ← Main entry point
│ ├── noteStorage.ts ← Persistent storage via globalState
│ ├── noteDecorationProvider.ts ← Explorer badge + hover tooltip
│ ├── noteWebview.ts ← Webview panel HTML + message handling
│ └── types.ts ← Shared TypeScript interfaces
├── media/ ← Extension icon assets
├── out/ ← Compiled JS (generated)
├── package.json
├── tsconfig.json
└── README.md
🛠️ Development & Run Instructions
Prerequisites
1 — Install dependencies
cd quick-file-notes
npm install
2 — Compile TypeScript
npm run compile
Or watch for changes continuously:
npm run watch
3 — Run the extension in VS Code
- Open the
quick-file-notes folder in VS Code:
code .
- Press
F5 to launch an Extension Development Host window.
- In the new window, open any workspace and right-click a file → Note.
4 — Package as .vsix (optional)
npm install -g @vscode/vsce
vsce package
This generates quick-file-notes-1.0.0.vsix which can be installed via:
code --install-extension quick-file-notes-1.0.0.vsix
🔧 Tech Stack
- TypeScript — type-safe extension logic
- VS Code Extension API — commands, FileDecorationProvider, Webview, globalState
- HTML/CSS — Webview UI with VS Code CSS variable theming
📄 License
MIT © Quick File Notes
| |
