Einrückung und Blockbildung in TypoScript
Motivation
Eine zentrale Anforderung an die Programmierung (und damit auch bei TypoScript) ist lesbarer und wartbarer Quellcode. Dies wird vor allem durch eine gute Strukturierung des Codes erreicht. Syntax-Highlighting im verwendeten Editor erhöht die Lesbarkeit zusätzlich, außerdem wird dadurch meist auch die Fehleranfälligkeit verringert.
Negativbeispiel
Das erste Beispiel zeigt die "Formatierung" von TypoScript-Quellcode, wie sie möglichst nicht aussehen sollte.
temp.ein_link = TEXT temp.ein_link.value = Das ist der Ankertext temp.ein_link.wrap = <p>|</p> temp.ein_link.typolink.parameter = 123 temp.ein_link.typolink.ATagParams = title="Das title-Attribut"
Der Bezeichner des Elements temp.ein_link
wird in jeder Zeile wiederholt. Zum Einen bedeutet dies mehr Schreibarbeit, andererseits wird der Code unnötig aufgebläht und unübersichtlich. Ausserdem steigt die Gefahr, dass bei einer Umbenennung des Bezeichners die eine oder andere Kopie des Namens vergessen oder falsch geschrieben wird.
Die Nachteile von fehlender Einrückung und fehlendem Syntax-Highlighting werden im nächsten Negativbeispiel noch deutlicher.
temp.ein_menu = HMENU temp.ein_menu.entryLevel = 0 temp.ein_menu.wrap = <ul>|</ul> temp.ein_menu.1 = TMENU temp.ein_menu.1.expAll = 0 temp.ein_menu.1.noBlur = 1 temp.ein_menu.1.NO.allWrap = <li>|</li> temp.ein_menu.1.NO.ATagTitle.field = nav_title // title temp.ein_menu.1.ACT < .NO temp.ein_menu.1.ACT = 1 temp.ein_menu.1.ACT.allWrap = <li class="active">|</li> temp.ein_menu.1.ACT.linkWrap = > | temp.ein_menu.2 = TMENU temp.ein_menu.2.expAll = 0 temp.ein_menu.2.noBlur = 1 temp.ein_menu.2.NO.allWrap = <li class="level2">|</li> ...
Best Practice
Hier sehen Sie, wie der oben stehende Code besser lesbar und strukturierter geschrieben werden kann.
temp.ein_link = TEXT temp.ein_link { value = Das ist der Ankertext typolink { parameter = 123 ATagParams = title="Das title-Attribut" } wrap = <p>|</p> }
Durch die Einrückung und vor allem durch die Bildung von Blöcken werden zusammengehörige Elemente (z.B. typolink
) viel deutlicher. Das Syntax-Highlighting trägt wesentlich zur besseren Lesbarkeit bei.
Die Verbesserungen sind im nächsten Beispiel noch deutlicher zu sehen:
temp.ein_menu = HMENU temp.ein_menu { entryLevel = 0 1 = TMENU 1 { expAll = 0 noBlur = 1 NO { allWrap = <li>|</li> ATagTitle.field = nav_title // title } ACT < .NO ACT = 1 ACT { allWrap = <li class="active">|</li> linkWrap = > | } } 2 < .1 2 { NO { allWrap = <li class="level2">|</li> # ... } } # ... wrap = <ul>|</ul> }
Bei beiden Lösungsvorschlägen sehen Sie, dass wir das umschließende wrap an das Ende des jeweiligen Elements stellen. Dies ist nicht unbedingt notwendig, wir haben uns dies jedoch angewöhnt, weil wir es an dieser Stelle als logischer ansehen als an Anfang der Elementdefinition.
TypoScript-Editoren und Plug-ins
Zur Unterstützung der Quellcode-Formatierung gibt es spezielle TypoScript-Editoren bzw. TypoScript-Plugins für bestehende Editoren:
- TypoScript-Plugin für PhpStorm — Unterstützung für TypoScript und TypoScript2
- NetBeans-Plugin für TypoScript
- DEV3 — TypoScript-Plugin für die Eclipse IDE
- PSPad mit SweeTS (Anleitung) — Erweiterung für den Freeware-Editor PSPad
- UltraEdit — Kommerzieller Editor, der auch TypoScript unterstützt