Typo3/PhpStorm

PhpStorm

• Software für alles, dass Web Development zu tun hat
• PhpStorm ist kein einfacher Texteditor, sondern eine Entwicklungsumgebung, die PHP, 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.
  • „TypoScript Plugin“ und „Fluid Plugin“ von Sgalinski Internet Services
  • Neben einem kostenlosen Plugin gibt es auch kostenpflichtige Versionen mit erweiterten Funktionen.
• Falls das TypoScript-Plugin von Jetbrains angezeigt wird, sollte dieses deinstallieren werden!
• PhpStorm zeigt mit den installierten Plugins Syntax-Fehler an, so werden Fehler schneller gefunden und behoben

Settings

While these seem minor at first sight, they ease the work on our QA department and help big time to not let the core decay over time in regards to Code quality and consistency.

Code Style

• TYPO3 uses PSR-2 as Coding Style for PHP.

To set that in PHPStorm: # Open Settings (or Default Settings, if you want to set this for all projects)

1. Go to Editor -> Code Style -> PHP
2. Click on "Set from..." (Looks like a link on the top right of the settings window)
3. Choose "Predefined Style > PSR1/2"

Autocomplete

Factory methods (makeInstance, ObjectManager->get)

• The TYPO3 core comes with a configuration file for the dynamic return type plugin that gives you autocomplete for factory methods like GeneralUtility::makeInstance and ObjectManager->get.
• To install the plugin in PHPStorm follow these steps:

1. Open Settings
2. Go to plugins
3. Click the "Browse repositories" button
4. Enter "dynamicReturnTypePlugin" in the search box
5. Install the plugin
6. The configuration will be loaded automatically

FYI: The configuration file: https://git.typo3.org/Packages/TYPO3.CMS.git/blob/HEAD:/dynamicReturnTypeMeta.json (If your TYPO3 version does not have this file you can download it and just add it to your project.) https://git.typo3.org/Packages/TYPO3.CMS.git/blob/HEAD:/dynamicReturnTypeMeta.json

  1 {
  2         // configuration file for PHPStorm Plugin: http://plugins.jetbrains.com/plugin/7251
  3         "methodCalls": [
  4                 {
  5                         "class": "\\TYPO3\\CMS\\Core\\Utility\\GeneralUtility",
  6                         "method": "makeInstance",
  7                         "position": 0
  8                 },
  9                 {
 10                         "class": "\\TYPO3\\CMS\\Extbase\\Object\\ObjectManagerInterface",
 11                         "method": "get",
 12                         "position": 0
 13                 },
 14                 {
 15                         "class": "\\PHPUnit\\Framework\\TestCase",
 16                         "method": "prophesize",
 17                         "position": 0,
 18                         "mask": "%s|\\Prophecy\\Prophecy\\ObjectProphecy"
 19                 },
 20                 {
 21                         "class": "\\PHPUnit\\Framework\\TestCase",
 22                         "method": "createMock",
 23                         "position": 0,
 24                         "mask": "%s|\\PHPUnit_Framework_MockObject_MockObject"
 25                 },
 26                 {
 27                         "class": "\\TYPO3\\TestingFramework\\Core\\BaseTestCase",
 28                         "method": "getAccessibleMock",
 29                         "position": 0,
 30                         "mask": "%s|\\PHPUnit_Framework_MockObject_MockObject|\\TYPO3\\TestingFramework\\Core\\AccessibleObjectInterface"
 31                 },
 32                 {
 33                         "class": "\\TYPO3\\TestingFramework\\Core\\BaseTestCase",
 34                         "method": "getAccessibleMockForAbstractClass",
 35                         "position": 0,
 36                         "mask": "%s|\\PHPUnit_Framework_MockObject_MockObject|\\TYPO3\\TestingFramework\\Core\\AccessibleObjectInterface"
 37                 }
 38         ],
 39         "functionCalls": [
 40         ]
 41 }

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"

• 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/

TypoScript

• PhpStorm ist eine Integrierte Entwicklungsumgebung (IDE) der Firma JetBrains für die Scriptsprache PHP und andere Webtechnologien und erfreut sich in der TYPO3 Community wachsender Beliebtheit.
• Neben den vielen Features von PhpStorm dürfte auch die Tatsache sein, dass der Hersteller an Open Source Entwickler eine kostenloseOpen Source License vergibt, in deren Genuss viele TYPO3 Core Developer gekommen sind.
• Die IDE ist sowohl für Windows, Mac als auch Linux verfügbar.
• Es gibt ein Plugin für PhpStorm, dass TypoScript Unterstützung nachrüstet.
• Für den Anfang sind das Syntax Highlighting, Code Folding und die Quick Navigation.
• Soweit ich das bisher testen konnte, funktioniert das Plugin nur mit dem heute erschienenen 4.0.1 RC, nicht aber mit Version 3.0.3 und älter.
• Die Installation geht in wenigen Schritten über File => Settings => Plugins =>Browse Repositories und dann nach TypoScript suchen.
• Am Mac kommt man über PhpStorm => Preferences => Plugins => Browse Repositories zum selben Ergebnis.
• Ein großes Dankeschön geht an Alexey Gopachenko und Elena Shaverdova von JetBrains, die diese erste Version entwickelt und kostenlos zur Verfügung gestellt haben.
• Für die Zukunft ist geplant, das Plugin unter eine Open Source Lizenz zu stellen oder durch die TYPO3 Community weiterentwickeln zu lassen.
• Bitte testet das Plugin ausführlich und bewertet es bzw. gebt ein Rating ab.
• Weiteres Feedback und Bugs können im Issue im JetBrains Bugtracker eingetragen werden.
• Wenn die TYPO3 Community genügend Interesse an dem Plugin zeigt, wird JetBrains bestimmt gerne weitere Verbesserungen vornehmen!
• Update: Danke an Kabarakh für den Hinweis: wenn man unter Settings => File Types => Recognized File Types => TypoScript noch *.ts einfügt, funktiniert das Plugin auch mit alten Versionen von PhpStorm!
• Update 2: Laut Jigal van Hemert kann man die Registered Patterns auch wie folgt erweitern:

*.ts setup.txt constants.txt ext_conf_template.txt ext_typoscript_setup.txt ext_typoscript_constants.txt* *.ts

• setup.txt
• constants.txt
• ext_conf_template.txt
• ext_typoscript_setup.txt
• ext_typoscript_constants.txt

Fluid

• Wahrscheinlich kennt jeder, der mit TYPO3 und PHPStorm arbeitet, bereits das TypoScript-Plugin der Agentur sgalinski Internet Services.
• Und falls nicht -> ist eine absolute Pflichtanschaffung und erleichtert die Arbeit mit TypoScript in PHPStorm (und Derivaten) enorm.
• Aus dem gleichen Hause ist seit einer Weile auch ein Fluid-Plugin zu haben, das die Arbeit mit Fluidtemplates unglaublich erleichtert.

Einige der Features sind

• Autovervollständigung: das Plugin analysiert Fluid-Code im gesamten Projekt und ist so in der Lage hilfreiche Vorschläge in der Autovervollständigung anzubieten.
• Quick-Dokumentation: Mit der Tastenkombination Strg + Q (Ctrl + J unter OS X) lässt sich jederzeit die Dokumentation zum aktuell ausgewählten Symbol in einem Popup-Fenster anzeigen.
• Direkt zu den richtigen Dateien springen: Dank des Fluid-Plugins sind die gesuchten Dateien nur noch einen Klick entfernt. Bei der Verwendung von Partials, Layouts, Templates oder Sections, kann mit Strg + Klick direkt an die Stelle gesprungen werden an der diese definiert sind.
• Syntax Highlighting und Brace Matching für Inline-ViewHelper: Das Fluid-Plugin bietet ein auf die Sprache optimiertes Highlighting und Brace-Matching.
• Fehlererkennung: Das Fluid-Plugin ist bestens mit den Eigenheiten der Sprache vertraut und erkennt somit Syntax-Fehler auch an Stellen an denen dies mit den IntelliJ Boardmitteln bisher nicht möglich war.
• Das Plugin wird ständig weiterentwickelt, neue Features sind bereits in Planung. Alle Infos zum Plugin und zu den Lizenzmodellen findet ihr auf der zugehörigen Website.

Namespaces

• Ich hatte das Problem, dass PhpStorm die Namespaces nicht zuordnen konnte.
• Auf Dauer ist das schon ärgerlich wenn man nicht eben schnell zur Deklaration einer Klasse springen kann, oder die Autovervollständigung nicht mehr funktioniert.
• Glücklicherweise bin ich nicht der einzige der sich daran stört. Es gibt bereits eine Extension die für PhpStorm per CLI Script ein Metafile erstellt.
• Die Extension nennt sich einfach Phpstorm und kann über Git geladen werden.

cd typo3conf/ext git clone https://github.com/irnnr/typo3-ext-phpstorm.git mv typo3-ext-phpstorm phpstorm

cd typo3conf/ext
git clone https://github.com/irnnr/typo3-ext-phpstorm.git
mv typo3-ext-phpstorm phpstorm

• Falls noch nicht geschehen muss ein BE-User, mit dem Namen „_cli_phpstorm“ erstellt werden.
• Nach der Installation der Extension führt man im Root Verzeichnis der TYPO3-Installation über die Konsole folgenden Befehl aus: php typo3/cli_dispatch.phpsh phpstorm_metadata
• Es kann eine ganze Weile dauern bis der Prozess abgeschlossen ist.
• Danach findet man im Root der TYPO3-Installation ein File namens „.phpstorm.meta.php„.
• Dieses kopiert man sich nun in seine Working-copy von Phpstorm und startet die IDE einmal neu.
• PhpStorm sollte das neue File nun erkennen und indexieren.
• Falls nicht automatisch indexiert wird, kann man unter Files|invalidate caches den Cache einmal löschen und die IDE dann neu starten.
• Spätestens jetzt sollte aber die Indexierung klappen.

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.

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"

• 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.

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