Notepad+ for VS Code
A full-featured notepad that lives inside VS Code, built entirely on VS Code's native UI components:
- TreeView — a "My Notes" panel in the Activity Bar, grouped into Pinned / All Notes
- Webview — a distraction-free note editor with live Markdown preview and split view
- StatusBarItem — shows your note count, click to jump straight to search
- QuickPick / QuickInput — instant fuzzy search across titles and content, color picker, sort menu
- Native dialogs — save/open dialogs for JSON export/import and Markdown export, modal confirmations for deletes
No external dependencies, no build step — pure VS Code API.
Features
Basic
- Create, rename, edit, and delete notes
- Notes persist across VS Code sessions and workspaces
- Sidebar list with last-updated timestamps and content preview on hover
- Auto-save while typing (configurable debounce)
Advanced
- Pin notes to keep important ones at the top
- Color labels (red/orange/yellow/green/blue/purple) for visual organization
- Live word & character count
- Markdown preview — toggle preview-only or side-by-side split view
- Duplicate note
- Sort notes by name, newest, or oldest (one click cycles through, from the sidebar toolbar)
- Full-text search via QuickPick — matches title and body, shows a content snippet
- Export all notes to a single JSON file (backup) or import them back (merge or replace)
- Export a single note as a standalone
.md file
- Delete all notes with a modal safety confirmation
- Context menu on every note: pin/unpin, rename, duplicate, set color, export, delete
- Keyboard shortcuts:
Ctrl+Alt+N (new note), Ctrl+Alt+F (search)
- Fully themed to match your current VS Code color theme (light/dark/high-contrast)
Commands
| Command |
Description |
Notepad+: New Note |
Create a note |
Notepad+: Search Notes |
Fuzzy search all notes |
Notepad+: Export All Notes |
Backup notes to JSON |
Notepad+: Import Notes |
Restore notes from JSON |
Notepad+: Change Sort Order |
Cycle name / newest / oldest |
Notepad+: Delete All Notes |
Wipe all notes |
Settings
| Setting |
Default |
Description |
notepad.autoSaveDelay |
500 |
Milliseconds of idle time before auto-save |
notepad.defaultSort |
"newest" |
Initial sort order |
notepad.showWordCount |
true |
Show live word/character count |
Install (from source)
- Unzip this folder.
- Open it in VS Code.
- Press
F5 to launch an Extension Development Host with Notepad+ loaded.
Or package it for real install:
npm install -g @vscode/vsce
vsce package
code --install-extension notepad-plus-1.0.0.vsix
Project structure
notepad-extension/
├── package.json # extension manifest (commands, views, menus, keybindings)
├── extension.js # activation entry point, command registration
├── noteManager.js # data layer: CRUD, persistence, search, import/export
├── noteTreeProvider.js # TreeDataProvider for the sidebar
├── notePanel.js # Webview panel controller
├── media/
│ ├── icon.svg # activity bar icon
│ ├── style.css # webview styling (uses VS Code theme variables)
│ └── main.js # webview client script (editor, preview, autosave)
└── README.md
License
MIT
| |
