Schnellere TYPO3-Entwicklung mit PhpStorm

PhpStorm ist kein einfacher Texteditor, sondern eine Entwicklungsumgebung, die nicht nur PHP, sondern auch SQL, CSS, SASS, Less, JavaScript und vieles mehr „versteht“. So erkennt diese Entwicklungsumgebung die Zusammenhänge zwischen den einzelnen Dateien. Über Plugins kann die Funktionalität noch erweitert werden. Und hier sind besonders „TypoScript Plugin“ und „Fluid Plugin“ von Sgalinski Internet Services interessant.

Neben einem kostenlosen Plugin gibt es auch kostenpflichtige Versionen mit erweiterten Funktionen. Falls euch das TypoScript-Plugin von Jetbrains angezeigt wird, solltet ihr dieses deinstallieren! PhpStorm zeigt euch mit den installierten Plugins viele Syntax-Fehler an, so dass Fehler schneller gefunden und behoben werden können.

Mit den TypoScript-Plugin beherrscht PhpStorm Syntax Highlighting / Code Folding über mehrere Dateien hinweg, da Objekte und Variablen erkannt werden. Mit Strg + Q (Ctrl + J unter OSX) kann du direkt die Dokumentation öffnen. Du kannst einen Strukturbaum und einen Brotkrumenpfad für eine schnellere Navigation nutzen.

Bei Fehlern bekommst du direkt einen Hinweis. Und bei Verwendung von <INCLUDE_TYPOSCRIPT: source=“FILE:pfad/zur/datei.t3s“ /> kann die Datei direkt mit Strg+Klick geöffnet werden.

Auch das Fluid-Plugin hilft dir schneller zu arbeiten. Es bietet dir wie auch schon das TypoScript-Plugin Auto-Vervollständigung, Quick-Dokumentation, Strg+Klick zum Anspringen von den Definitionen in anderen Dateien, Syntax Highlighting und Brace Matching für Inline-ViewHelper und Fehler-Hervorhebung.

Mehr dazu auf der Webseite des Plugin-Entwicklers: https://www.sgalinski.de/typo3-produkte-webentwicklung/

Diese Tipps lassen sich unabhängig von TYPO3 und den erwähnten Plugins nutzen und sollen kurze Beispiele für die Leistungsfähigkeit von PhpStorm sein.

Vorlagen für FluidTemplates (Templates/Layouts/Partials) können als Live-Template angelegt werden. So kann eine leere HTML-Datei mit zwei bis drei Tastenanschlägen das komplette Gerüst für eine optimierte Fluid-Vorlage erhalten.

Die Live-Templates werden in den Einstellungen unter Editor->Live Templates angelegt. Es muss eine Abkürzung, Beschreibung und der Template-Text definiert werden. Wichtig ist, dass ihr auch definiert, in welchen Dateien die Abkürzung funktionieren soll und mit welcher Taste die Abkürzung in den Template-Text umgewandelt werden soll. Ich habe mir auch für einen Kommentar im FluidTemplate ein Live-Template erstellt: Mit der Abkürzung „FC + Tab“ benutze ich diesen Template-Text:

Durch $SELECTION$ kann ich später im Template auch einen Text markieren und mit CMD+ALT+J bzw. CTRL+ALT+J mit dem Kommentar umschließen. <f:comment> … </f:comment> sorgt dafür, dass im generierten HTML keine Ausgabe gemacht wird. <![CDATA[ … ]]> verhindert, dass im Kommentar enthaltene ViewHelper geparsed werden und damit die Seitengenerierung verzögern. Und der HTML-Kommentar <!– … –> sorgt dafür, dass PhpStorm auch den Code ausgraut.

Bei diesem Live-Template ist es sinnvoll, den Haken bei „Reformat according to style“ zu setzen, damit der Code automatisch eingerückt wird.

Mit einem File-Watcher kann PhpStorm die Änderung einer Datei überwachen und dann beispielsweise automatisch aus einer SASS, SCSS oder Less-Datei eine CSS-Datei generieren. Diese kann dann wiederum automatisch komprimiert werden. Die CSS/JS-Kompression ist sehr einfach einzubinden. Zunächst benötigt ihr den YUI Compressor von der Webseite https://github.com/yui/yuicompressor/releases. Die Datei „yuicompressor-2.4.8.jar“ speichert ihr lokal ab. Dann müsst ihr unter Einstellungen->Tools->File Watchers den File-Watcher „YUI Compressor JS“ und/oder „YUI Compressor CSS“ mit einem Klick auf das Plus-Icon hinzufügen.

Damit die Dateien inklusiv der minimierten Version automatisch hochgeladen werden, muss unter „Build, Execution, Deployment“ -> Deployment -> Options -> „Upload external changes“ noch der Haken gesetzt werden. Aber Vorsicht: Sollten lokal Dateien gelöscht werden (auch wenn dies im Finder/Explorer geschieht), dann werden auch die entfernten Dateien gelöscht. Ich persönlich lasse diese Checkbox lieber ohne Haken und lade beim Veröffentlichen auf dem Live-System die minimierten Dateien manuell hoch.

Mit Emmet kannst du HTML- oder CSS-Code viel schneller eingegeben. Wenn du beispielsweise im HTML-Template die Zeile

mit einem Tab bestätigst, generiert PhpStorm darauf folgenden HTML-Code:

Zur Erklärung: div.container erzeugt den alles umschließenden DIV-Container mit der CSS-Klasse „container“.

Mit > wird ein untergeordnetes Tag eingefügt. Die runden Klammern gruppieren den Header, damit mit dem +div.row ein DIV mit der CSS-Klasse „row“ parallel zum Header erzeugt werden kann. Im Header wird das Dollar-Zeichen für einen Zähler verwendet.

Mit den geschweiften Klammern kann ein Text eingefügt werden.

Mit >div.col-sm-4*3 werden unter dem DIV mit der Klasse „row“ drei mal ein DIV mit der Klasse „col-sm-4“ angelegt.

Mit >lorem wird der Lorem Ipsum Blindtext eingefügt

Die komplette Dokumentation zu Emmet findest du unter

In unserer neuen Online-Schulung „PhpStorm optimal nutzen“ werde ich über den Zeitraum eines Vormittags zeigen, wie du die Entwicklungsumgebung optimal nutzten kannst. Mein Fokus liegt natürlich hauptsächlich auf der Optimierung für TYPO3-Entwicklung, aber das erworbene Wissen kannst du auch für andere Systeme nutzen.

Hier geht’s zu unseren Schulungen.