VS-Code Erweiterung: MageForge – Magento 2 Frontend-Workflow direkt im Editor
MageForge für VS Code bringt die wichtigsten Magento 2 Frontend-Befehle in eine eigene Activity Bar – inklusive Theme-Übersicht, Template-Override, DDEV-Unterstützung und mehr.
Visual Studio Code hat sich längst als zentrale Arbeitsumgebung für Webentwickler etabliert. Was den Editor so stark macht, ist nicht nur seine Geschwindigkeit, sondern vor allem seine Erweiterbarkeit. Für Magento 2 Entwickler gibt es nun ein neues Tool, das den Alltag im Frontend deutlich vereinfacht: MageForge für VS Code.
Was ist MageForge?
MageForge ist ein Magento 2 Modul, das den Frontend-Workflow beschleunigt. Es bündelt wiederkehrende Aufgaben wie das Bauen, Beobachten und Bereinigen von Themes, die Prüfung von Hyvä-Kompatibilität oder das Erstellen von Template-Overrides. Die offizielle VS Code Extension bringt diese Befehle nun direkt in den Editor – ohne Terminal-Wechsel, ohne lange Befehlsketten.
Die wichtigsten Funktionen
Die Erweiterung fügt VS Code eine eigene MageForge Activity Bar hinzu. Über diese lassen sich die gängigsten Aufgaben mit wenigen Klicks erledigen:
Commands View
Hier stehen alle wichtigen MageForge CLI-Befehle als Schaltflächen bereit:
- Theme: Build, Watch, Clean, List, Inspector
- Hyvä: Tokens, Compatibility Check
- Template: Override
- Dependencies: Update
- System: Check, Version
Ein Klick genügt, und der Befehl wird in einem benannten Terminal innerhalb des Magento-Wurzelverzeichnisses ausgeführt.
Themes View
Diese Ansicht zeigt alle installierten Magento Themes – sowohl Frontend- als auch Adminhtml-Themes. Über das Kontextmenü können einzelne Themes gebaut, beobachtet oder bereinigt werden. Die Liste lässt sich jederzeit aktualisieren.
Template Override
Eines der praktischsten Features: Ein Rechtsklick auf eine Template-Datei im Explorer öffnet die Option MageForge > Override File…. Die Datei wird dann automatisch in das gewünschte Theme kopiert. Das spart manuelle Pfad-Suche und wiederholte Klicks.
Integrierte Terminal-Ausgabe
Alle Befehle laufen in benannten VS Code Terminals direkt im Magento Root-Verzeichnis. Das Ergebnis bleibt so jederzeit im Blick, ohne dass externe Fenster oder Tabs nötig sind.
DDEV-Unterstützung
Die Extension erkennt automatisch, ob sich im Projekt ein .ddev-Verzeichnis befindet, und führt bin/magento dann entsprechend über DDEV aus. Über die Einstellungen lässt sich die PHP-Ausführung aber auch auf Docker Compose, Lando oder eine lokale PHP-Installation umstellen.
Konfigurationsmöglichkeiten
MageForge für VS Code bietet einige sinnvolle Einstellungen unter dem Prefix mageforge.:
| Einstellung | Standard | Beschreibung |
|---|---|---|
mageforge.magentoRootPath | '' | Pfad zum Magento-Wurzelverzeichnis |
mageforge.phpExecution | 'auto' | PHP-Ausführung: auto, ddev, docker-compose, lando, local |
mageforge.dockerComposeService | 'php' | Docker Compose Service-Name |
mageforge.phpBinary | 'php' | Lokaler PHP-Binary oder benutzerdefiniertes Kommando |
Technische Basis
Die Extension ist in TypeScript entwickelt und setzt auf die offizielle VS Code API. Sie nutzt Aktivitätsansichten, Befehle, Kontextmenüs und benannte Terminals, um einen möglichst reibungslosen Workflow zu ermöglichen. Die Tests laufen auf Ubuntu, Windows und macOS, um eine stabile Erfahrung über alle Plattformen hinweg zu gewährleisten.
Für wen ist MageForge gedacht?
MageForge richtet sich vor allem an Magento 2 Frontend-Entwickler, die regelmäßig mit Themes, Templates und dem bin/magento-CLI arbeiten. Wer die wiederkehrenden Schritte des Theme-Builds, der Template-Anpassung oder der Abhängigkeitsprüfung direkt im Editor erledigen möchte, findet hier eine willkommene Erleichterung.
Fazit
Mit der MageForge VS Code Extension lässt sich ein großer Teil des Magento 2 Frontend-Workflows direkt aus dem Editor steuern. Die Integration von Theme-Verwaltung, Befehlsausführung, Template-Override und DDEV-Unterstützung macht sie zu einem nützlichen Begleiter für Entwickler, die Wert auf Effizienz legen.
Die Extension ist kostenlos im VS Code Marketplace verfügbar. Wer tiefer einsteigen möchte, findet den Quellcode und weitere Details im GitHub Repository.