Schnellere TYPO3-Entwicklung mit PhpStorm

|
Coden am Laptop mit Tasse im Hintergrund

Kürzlich ist die neue Version 1.2 eines sehr nützlichen Fluid-Plugins für PhpStorm erschienen. Dies möchte ich als Anlass nehmen, um euch PhpStorm als Werkzeug für eine schnellere Entwicklung eurer TYPO3-Projekte vorzustellen. Die Anwendung wird von mir schon seit ein paar Jahren eingesetzt. Zuerst bin ich natürlich mit PhpStorm wegen der Extensionentwicklung für TYPO3 in Berührung gekommen. Inzwischen setze ich diese Software für alles ein, was irgendwie mit Web Development zu tun hat. Ich kann sie auch reinen TYPO3 Integratoren empfehlen, die eigentlich (noch) gar kein PHP programmieren können.

Warum sollte ich PhpStorm einsetzen?

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.

Was machen die TYPO3 -Plugins?

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.

Screen phpStorm
TypoScript-Datei

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/

Drei Tipps für schnelleres Entwickeln

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.

Tipp 1: Live-Templates

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.

Tipp 2: File-Watcher

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.

Screenshot file-watcher
Anlegen eines neuen File-Watchers mit Angabe von Name, Beschreibung sowie weiteren Einstellungen

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.

Tipp 3: Emmet

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

Lust auf mehr?

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.

Kommentare

MonTea am

Noch eine Sache: Eine Begründung, warum man das JetBrains Plugin für TypoScript deinstallieren sollte und sich das kostenpflichtige Plugin von sgalinsky wäre auch nett.. vielen Dank

Eric am

Das JetBrains Plugin für TypoScript wird seit 2014 nicht mehr weiter entwickelt. Das TypoScript-Plugin von sgalinski ist aktuell das beste und aktuellste auf dem Markt. Ich benutze es selbst seit über 4 Jahren.

MonTea am

Hier fehlen einige Infos: z.B. bei Tipp 1: zwischen "benutze ich diesen Template-Text:" und "Durch $SELECTION$ kann ich später im T" steht nichts... nur ein leeres  

Rainer J. Koopmann am
ich hatte versucht phpstorm auf Windows 10 pro mit Docker und DDEV gemeinsaam zu nutzen.
Nach der Inbetriebnahme funktionierte alles gut bis ein Windows Update durchgeführt wurde. Danach ließ sich phpstrom nicht mehr starten. Microsoft läßt ein Berieb einfach nicht mehr zu.
Gibt es Hinweise aus der Kommunity ?
Kristina Dahl am
Hallo Rainer!

Am besten wendest du dich dazu an den Support von Jetbrains (phpstorm). :-)

Viele Grüße

Kristina
Rainer Johannes Koopmann am

O.K.