VIBE - Visual Icon Based Executer
Visual Icon Based Executer - A VSCode extension that displays debug configurations with custom icons from your project.
Features
- 🚀 Sidebar panel with a rocket icon for quick access to all debug configurations
- 🎨 Custom icons for each app using your actual app logos
- 📋 Visual separators between different app groups for better organization
- ⌨️ Keyboard shortcut:
Cmd+Shift+D (Mac) / Ctrl+Shift+D (Windows/Linux)
- ⚡ One-click launch from the sidebar
Usage
- Click the 🚀 rocket icon in the Activity Bar (left sidebar)
- Click any configuration to start debugging
- Configurations are grouped by app with visual separators
Quick Pick
- Press
Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows/Linux)
- Select your debug configuration from the list
- Debugging starts automatically
Configuration
VIBE settings are available under Settings → Extensions → VIBE.
| Setting |
Default |
Description |
vibe.logosDir |
packages/design_system/assets/images/app_logos |
Relative path to app logo SVGs |
vibe.appsConfigFile |
.vibe.apps.json |
Per-app icon and label overrides |
vibe.devices.autoStartEmulators |
true |
Auto-start simulators/emulators on device selection |
Priority for logos path: VS Code setting → .vibe.apps.json → default.
.vibe.apps.json (per-app overrides)
Copy .vibe.apps.json.example to your workspace root. Example:
{
"logosDir": "packages/design_system/assets/images/app_logos",
"apps": {
"us_freshmarket": {
"icon": "tfm-US.svg",
"label": "The Fresh Market"
}
}
}
Debug configuration names are grouped by app key (e.g. co_jumbo STG → co_jumbo). SVG files follow {brand}-{CC}.svg (e.g. jumbo-CO.svg).
Requirements
| |
