The challenge
Developers waste time manually finding, importing, and optimizing images in their projects.
The approach
Built a VS Code extension with automatic project detection, CSS sprite generation, image conversion, and an integrated asset manager with trash management.
The outcome
One-click image imports with framework-specific code, sprite sheet generation, and unused asset detection.
How QuickImport is put together
A VS Code extension. Webview UIs message the extension host, which routes each request to a small single-purpose service that reads the project, processes images in pure JavaScript and writes back to the workspace and the editor.
- single-purpose services
- 6
- native dependencies
- 0
01 · VS Code UI
client
Quick Actions sidebar
webview view
client
Import panel
webview panel
02 · Extension host
gateway
Extension host
commands, message bridge
03 · Services
service
Project detector
framework from package.json
service
Image scanner
service
Image converter
Jimp
service
Sprite generator
CSS sprite sheets
service
Asset analyzer
unused & large assets
service
Import generator
framework-specific code
04 · Workspace
object store
Project assets
with .trash manifest
client
Active editor
14 connections
- Quick Actions sidebar→Extension hostpostMessage
- Import panel→Extension hostpostMessage
- Extension host→Import panelstate updates · async
- Extension host→Project detector
- Extension host→Image scanner
- Extension host→Image converter
- Extension host→Sprite generator
- Extension host→Asset analyzer
- Extension host→Import generator
- Image scanner→Project assetsread
- Image converter→Project assetswrite
- Sprite generator→Project assetssheet + CSS
- Asset analyzer→Project assetsmove to trash
- Import generator→Active editorinsert
Request flow · Importing images into a component
- 1The user picks images in the import panel; the webview posts the selection to the extension host.
- 2The project detector reads package.json, falling back to config files, to learn the framework and asset folder.
- 3The converter resizes or re-encodes as requested and writes the results into the asset folder.
- 4The import generator emits the right statements for the framework and inserts them into the last active editor.
Design decisions
- Pure-JS image processing
- Jimp instead of a native library means the extension installs on any OS and architecture without a compile step.
- Framework-aware output
- Detection drives both where files go and what code is written, so one command fits React, Next.js, Vue, Angular or Svelte.
- Reversible cleanup
- Unused assets move to a trash folder tracked by a manifest instead of being deleted, so a false positive costs a click, not a file.
Trade-offs & known limits
- Jimp is slower than native encoders on very large images; the trade buys zero-setup installs.
Have something similar in mind?
I'm open for freelance and contract work — let's talk about what you're building.