Live Templates für die Shopware-Entwicklung mit JetBrains-Software: Code-Fragmente mehrfach verwenden und teilen

von | 18. Juli 2020 | 0 Kommentare

“Wie war das nochmal mit dem Datenbank-Aufruf?”

“Oh nein, ich brauche schon wieder ein Lorem Ipsum.”

“Wo hab ich zuletzt den Logger verwendet? Ich müsste das mal kopieren.”

Solche und ähnliche Fragen spuken durch die Köpfe von Entwicklern oder werden quer durch den Raum zum nächsten Kollegen geworfen. Es ist ein typischer Fall in jeder Shopware Agentur, dass man bestimmte Code-Blöcke ständig wieder benötigt. Aber wie soll man sich das alles merken? Natürlich gibt es ganz offensichtliche Lösungen dafür:

  • Die am meisten verwendeten Blöcke hat man irgendwann sowieso im Kopf, …
  • … oder man hat zumindest einen Kollegen, der diese im Kopf hat.
  • Man hat es ja schon oft verwendet, also sucht man in altem Code.
  • Man schreibt sich ein Cheat-Sheet.
  • Man befragt das Internet (Google, Stack Overflow, Forensuche, …)

Heute möchte ich Dir aber einen Weg zeigen, der einfacher ist und direkt aus Deiner Entwicklungsumgebung (IDE) heraus funktioniert: Live Templates. Einzige Voraussetzung: Es ist eine IDE von JetBrains. Bei Pixline Media arbeiten alle Entwickler mit PHPStorm (von JetBrains), so dass sich die Nutzung dieser Funktionalität anbietet.

Live Templates sind Code-Fragmente, die über den Aufruf eines Kürzels eingebunden werden können. Diese Fragmente können aus komplett statischem Text bestehen, aber auch auch Variablen und ein wenig Logik enthalten. Im Laufe dieses Beitrags zeige ich Dir die verschiedenen Möglichkeiten anhand einer Debug-Ausgabe.

Dies ist ein möglichst einfaches Live Template. Man tippt „debug“ (was vorher als Kürzel definiert wurde)  und erhält nach Bestätigung mit Tab eine komplette Konsolen-Ausgabe für Javascript.

Die Live Templates finden sich in jeder Jetbrains-IDE unter Settings > Editor > Live Templates.

Bei einem neuen Live Template musst Du folgende Werte definieren:

1. Kürzel: Über diesen Namen wird das Live Template gefunden, deswegen muss dieser auch eindeutig sein.

2. Beschreibung: Dies ist optional. Wenn Du aber eine Beschreibung angegeben hast, wird diese bei der Auswahl des Live Templates angezeigt. Dies kann hilfreich sein, um bereits vor der Einbindung einen Hinweis zu haben, was Du in diesem Live Template zu erwarten hast.

3. Template-Text: Dies ist der Text, der eingebunden wird.

4. Kontext: Hier kannst Du angeben, in welchen Dateitypen dieses Live Template vorgeschlagen wird. Dies wird nicht weiter in diesem Blog-Beitrag behandelt.

Wenn Du einmal das obere Beispiel-Template nachgebaut hast, wirst du merken, dass nach der Autovervollständigung der Cursor am Ende des eingefügten Blocks ist. Dies kann manchmal im Schreibfluss stören, da Du vielleicht direkt in dem Debug-Text weiterschreiben möchtest. Hier kommt die vordefinierte Variable $END$ ins Spiel.

Nun wandert der Cursor nach Abschluss des Live Templates an die richtige Stelle, um den Debug-Kommentar direkt zu vervollständigen. Der logische nächste Schritt wäre dann, dass der Cursor mit Hilfe von Tab an mehrere definierte Stellen springt. Dafür gibt es leider keine vordefinierte Variablen, also musst Du selbst welche anlegen. Ein Variablenname ist immer durch $ begrenzt. Ich lege zwei weitere Variablen ($FIRST$ und $SECOND$) an und ändere dann über „Edit Variables“ noch deren Reihenfolge.

Wie Du vielleicht bereits gesehen hast, kann man die Variablen mit Hilfe von Funktionen etwas intelligenter machen. In meinem Beispiel soll in Variable $SECOND$ immer die aktuelle Zeilennummer stehen. Dies kannst Du über den Ausdruck „lineNumber()“ bewerkstelligen. Wenn Du nun noch zusätzlich den Haken bei „Skip if defined“ setzt, wird die Zeilennummer direkt gesetzt und beim Tab-Klick übersprungen. In diesem Blog-Beitrag werde ich Dir erstmal keine weiteren Ausdrücke zeigen, diese sind einerseits teilweise abhängig von der verwendeten Programmiersprache/-umgebung, andererseits würde eine detailierte Beschreibung den Umfang dieses Beitrags sprengen.

Als weiteren Schritt möchte ich noch $END$ durch $FIRST$ austauschen. Du siehst nun zwar, dass beide Erwähnungen von $FIRST$ gleichzeitig befüllt werden, da wir uns aber bei der ersten Erwähnung von $FIRST$ innerhalb eines Strings befinden, springt die Autovervollständigung nicht direkt an. Dies umgehe ich mit einer dritten Variable, $THIRD$. Da dies eine neue Variable ist, kann ich sie in der Befüll-Reihenfolge hinter $FIRST$ anstellen und ihr als Standard-Wert den Wert von $FIRST$ geben. Bitte beachte aber dabei, dass sowohl in diesem Feld als auch bei den Ausdrücken die Variablen jeweils ohne die $ angegeben werden.  Nun funktioniert wieder die gewohnte Autovervollständigung.

Als letzte Variable möchte ich Dir noch $SELECTION$ vorstellen. Diese Variable funktioniert nur, wenn Du beim Aufruf des Live Templates einen Text markiert hast. Nach Markierung des Textes kannst Du mit STRG+ALT+T dein Live Template auswählen. $SELECTION$ wird dann durch den aktuell markierten Text ersetzt.

Nun habe ich Dir gezeigt, wie zumindest ein einzelner Entwickler bei uns seine Templates anlegt. Aber noch viel interessanter ist es, dass das gesamte Team auf gemeinsame Live Templates zugreifen kann. Dazu haben wir uns ein gemeinsames Git-Repository anlegt, in welches wir in regelmäßigen Abständen nützliche Live Templates pushen. Dieses Repository bindet jeder von uns als Read-Only-Ressource in sein PHPStorm ein. Du kannst auch mehrere Repositories gleichzeitig einbinden oder in ein Repository mehrere template.xml hinterlegen.

Der Export der Live Templates findet immer als Zip-Archiv statt. Dieses kannst Du entpacken und darin die entsprechende XML-Datei suchen. Diese kannst Du mit Hilfe eine beliebigen Editors öffnen und anpassen.

Bei der gemeinsamen Pflege eines Repositories ist vor allem gute Absprache wichtig. Wir haben uns darauf geeinigt, dass wir jedes Kürzel mit dem aktuellen Kontext beginnen. Wenn wir zum Beispiel ein Live Template für Shopware5 haben, dann wird dieses mit sw5_ beginnen. Weiterhin besprechen wir in regelmäßigen Abständen neue Ideen für Live Templates, die wir in die gemeinsame Liste aufnehmen können.

Ich hoffe Du fandest diesen Beitrag hilfreich und sorgst nun dafür, dass auch Dein Team nun mehr Live Templates nutzen möchte. Anbei findest Du die in diesem Beitrag genutzten Templates als XML, vielleicht kann dies ja direkt als Startpunkt für Euer Repository dienen:

0 Kommentare

Kommentar verfassen

Diese Themen könnten Ihnen auch gefallen

Usability Award 2020 – wir sind dabei!

Usability Award 2020 – wir sind dabei!

Jetzt ist es endgültig offiziell: Unser gemeinsam mit minimum aus Berlin konzipierter, gestalteter und umgesetzter Shopware-Shop www.minimum.de hat bei der Vorentscheidung des Shoplupe Usability Awards 2020 im Community Voting den ersten Platz in der Kategorie „Möbel...