Einrückung und Blockbildung in TypoScript

Durch Einrücken und Bildung von Blöcken kann man die Lesbarkeit von TypoScript Code verbessern.

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.

Negativbeispiel 1: Unstrukturiertes TypoScript
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.

Negativbeispiel 2: Unstrukturiertes TypoScript
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 = &gt; |
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.

Verbesserung 1: Strukturiertes TypoScript mit Syntax-Highlighting
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:

Verbesserung 2: Strukturiertes TypoScript mit Syntax-Highlighting
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 = &gt; |
    }
  }
  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: