Image Editor Pro for VSCode
Professional image editing directly in Visual Studio Code. Edit, crop, rotate, and manipulate images without leaving your editor.
Features
🎨 Core Editing Features
- Precise Cropping - Select and crop images with pixel-perfect accuracy
- Image Rotation - Rotate images 90° left or right
- Real-time Preview - See changes instantly as you edit
- Grid Overlay - Enable alignment grid for precise editing
- Dimension Display - View current image and crop dimensions in real-time
⚙️ Advanced Controls
- Zoom & Pan - Navigate large images easily with zoom controls (10%-500%)
- Drag to Pan - Click and drag to move around the image
- Precise Selection - Drag crop handles from corners and edges for exact dimensions
- Keyboard Shortcuts - Quick access to common operations
🎯 Professional Features
- Dark Theme Support - Fully integrated with VSCode's dark theme
- Memory Efficient - Opens only when explicitly requested (configurable)
- Multiple Format Support - Works with PNG, JPG, JPEG, GIF, BMP, and WebP
Installation
- Open VSCode
- Go to Extensions (Ctrl+Shift+X)
- Search for "Image Editor Pro"
- Click Install
Or install directly from the VSCode Marketplace
Usage
Opening the Editor
Method 1: Right-Click Menu (Default)
- Right-click any supported image file in the Explorer
- Select "Edit with Image Editor"
Method 2: Command Palette
- Open an image file
- Open Command Palette (Ctrl+Shift+P)
- Run "Edit with Image Editor"
Method 3: Auto-Open Mode (Optional)
Enable automatic opening by setting imageEditor.openOnClick to true in settings.
Editing Operations
Cropping Images
- Click the "Crop" button in the toolbar
- Drag to create a selection box or adjust existing handles
- Use corner handles for proportional resizing
- Use edge handles for width/height adjustment
- Click "Save" to apply or "Reset" to cancel
Rotating Images
- Click "Rotate Left" for 90° counter-clockwise rotation
- Click "Rotate Right" for 90° clockwise rotation
Zoom Controls
- Scroll mouse wheel to zoom in/out
- Zoom range: 10% to 500%
- View current zoom level in info panel
Grid Toggle
- Click "Toggle Grid" to show/hide alignment grid
- Shows 20px grid with red center lines
- Useful for precise positioning and alignment
Keyboard Shortcuts
| Action |
Shortcut |
| Save |
Ctrl+S / Cmd+S |
| Cancel Operation |
Esc |
| Zoom In |
Mouse Wheel Up |
| Zoom Out |
Mouse Wheel Down |
Configuration
Settings
| Setting |
Type |
Default |
Description |
imageEditor.openOnClick |
boolean |
false |
Automatically open images in the editor when clicked |
To change settings:
- Open Settings (Ctrl+,)
- Search for "Image Editor"
- Modify settings as needed
- Reload window for changes to take effect
- PNG (.png)
- JPEG (.jpg, .jpeg)
- GIF (.gif)
- Bitmap (.bmp)
- WebP (.webp)
Screenshots
Main Editor Interface
The editor provides a clean, intuitive interface with all tools readily accessible:
- Top toolbar with all editing operations
- Central canvas for image display
- Real-time information panel showing dimensions
- Dark theme integration
Crop Mode
Precision cropping with visual feedback:
- Draggable selection box
- Eight control handles (corners + edges)
- Real-time dimension display
- Grid overlay for alignment
Tips & Tricks
- Memory Management: By default, the editor only opens via right-click menu to save memory
- Precise Cropping: Enable grid for better alignment when cropping
- Quick Save: Use Ctrl+S to quickly save your edits
- Zoom Navigation: Zoom in for detailed work, then drag to pan around
- Reset Function: Quickly revert to original image with the Reset button
Requirements
- Visual Studio Code version 1.60.0 or higher
- Supported image formats in your workspace
Known Issues
- Large images (>10MB) may experience slower performance
- Some animated GIFs will be converted to static images after editing
Contributing
Found a bug or have a feature request? Please visit our GitHub repository:
Release Notes
See CHANGELOG.md for detailed release history.
1.0.0 - Initial Release
- Core image editing functionality
- Crop and rotate features
- Zoom and pan controls
- Grid overlay
- Dark theme support
- Configurable opening modes
License
This extension is licensed under the MIT License.
Enjoy editing images directly in VSCode! 🎨
If you find this extension helpful, please consider:
