VS Code Image Editor (vsimage)

Edit PNG, JPEG, WebP, and GIF images directly inside VS Code.

vsimage is a lightweight, casual image tool for development workflows: quick crop, resize, mosaic, rotate, flip, and export without leaving the editor. It is intentionally focused on everyday editing tasks rather than being a full-blown professional image editor.

It also aims to feel familiar if you already use Photoshop, with shortcuts and interactions that stay as close to that style as practical so you can work quickly without relearning basic muscle memory.

Features

• Default image editor for png, jpg, jpeg, webp, gif (opens in vsimage on double-click)
• Explorer / tab context menu — Edit with VS Code Image Editor (vsimage: Open with Image Editor)
• Photoshop-style tool rail — cursor, marquee, move, crop, color picker, and related tools on the left
• Selection pixel move (V) — drag pixels inside the marquee; confirm with Enter or Apply move (clears the source area)
• Full-image move — press V with no marquee to move the entire canvas (marquee UI hidden)
• Shift constrain — horizontal, vertical, or 45° diagonal while dragging marquee, moving pixels, or resizing
• Crop — quick presets (auto, free, 1:1, 16:9, 4:3, circle) and marquee shortcuts for everyday trimming
• Resize — width/height, scale slider (10–200%), aspect-ratio lock; stepped downscale for sharper shrinks
• Mosaic — simple block mosaic for hiding small areas while working
• Transform — rotate, flip, toolbar zoom, pan (H or Space + drag)
• Zoom loupe — hold Z and drag on the image; magnified preview on the canvas + selection outline
• Edit history — thumbnail snapshots with one-click restore
• Save flow — dirty-state tracking, save prompt on close, untitled document support
• Export as PNG, JPEG, or WebP with quality control
• Clipboard — paste images in, copy edited images out (format & selection options)
• Color picker — hold I, move over the image, click to sample; copy as HEX / RGB / RGBA / HSL / HSV / CMYK
• Pixel rulers with zoom-aware ticks
• Right-click menu on the canvas (copy, erase selection, flip, save, undo, reset zoom)
• Undo for destructive edits (Cmd/Ctrl+Z)
• i18n — English and Korean UI (follows VS Code display language)

Usage

Open an image

1. Double-click a supported image in the Explorer — opens in vsimage (default custom editor).
2. Or right-click the file → Edit with VS Code Image Editor.
3. Or Command Palette → vsimage: Open with Image Editor (current file).
4. Or Command Palette → vsimage: Create Empty Image Editor — import, drag-and-drop, or Cmd/Ctrl+V paste.

If an image already opened in another viewer, use Reopen Editor With… → VS Code Image Editor.

Workspace layout

• Tool rail — Photoshop-style tools on the left (cursor, marquee, move, crop, color picker, …).
• Canvas — image, rulers, scroll/zoom; floating toolbar (zoom, rotate, flip).
• Sidebar — properties, selection info, tool options, history, save/export.
• Hold Cmd/Ctrl on the canvas to show the keyboard shortcut overlay.

Crop & marquee

Zoom & navigation

When crop mode is on, double-click inside the marquee still toggles full image ↔ trim to content. Double-click outside the marquee (or with crop off) toggles zoom fit ↔ 100%.

Resize

1. Set target width/height or use the scale slider.
2. Click Apply Resize — image updates; sidebar shows the new pixel size at 100% scale.
3. Large downscales use 50% stepped resizing; adjust Sharpen with the slider after Apply Resize.

After crop or resize, the resize panel reflects the current image dimensions (not cleared to zero).

Color & clipboard

• I — live color preview; click to open format modal and copy.
• Cmd/Ctrl+C — copy image (optional format modal).
• Cmd/Ctrl+S — save.

Keyboard shortcuts

Install

Search for VS Code Image Editor (publisher: choihunchul).

Development

npm install
npm run compile          # extension bundle
npm run compile-tests    # test TypeScript → out/
npm test                 # Extension Development Host integration tests (F5 environment)

Quick unit tests (feature logic and webview contracts, no VS Code runtime):

npm run test:unit

Press F5 in VS Code to launch the Extension Development Host.

Release & publish

Automated via GitHub Actions:

• CI — push/PR to main (build, test, VSIX)
• Publish — push a v* tag (e.g. git push origin v1.3.5); runs once per tag. GitHub Releases are optional notes only and do not trigger publish.

Release flow:

# bump version in package.json, commit, then:
git tag v1.3.5
git push origin main
git push origin v1.3.5    # triggers marketplace publish
gh release create v1.3.5 --notes "…"   # optional changelog only

Manual publish:

npm run package
npm run publish:vsce   # VS Code Marketplace
npm run publish:ovsx   # Open VSX

Secrets: VSCE_PAT (Marketplace Manage), OVSX_PAT (open-vsx.org).

Links

• Repository: https://github.com/choihunchul/vsimage
• Issues: https://github.com/choihunchul/vsimage/issues
• Releases: https://github.com/choihunchul/vsimage/releases

License

MIT © choihunchul