senäh

Serie: 10 Features, die dein Texteditor haben sollte, und warum ich die JetBrains IDEs vergöttere

• Teil 1: Mein Texteditor-Werdegang und was für mich intelligentes Text-Editing ausmacht
• Teil 2: IDE-Features für effizienteres Coden

Text-Editoren und IDEs für Entwickler sind ein schwieriges Thema. Jeder Entwickler hat eigene Bedürfnisse und Diskussionen um das richtige Tool arten schnell in Religionskriegen aus. Ich habe für mich die IDEs von JetBrains entdeckt und will euch in einem Zweiteiler näher bringen warum.

Mein Texteditor-Werdegang

Mein Weg zu einer ordentlichen IDE war ein recht weiter. Als ich das erste Mal auf der Hochschule von PHP gehört habe, fing ich mit Dreamweaver an. War durch die Adobe Creative Suite, die auf jedem Hochschulrechner zu finden war, einfach das Naheliegendste.

Aus heutiger Sicht gefällt mir daran eigentlich nicht mehr wirklich etwas mit Ausnahme des Syntaxhighlighting. Das defaultmäßige Syntaxhighlighting war bisher das Beste, das mir je untergekommen ist. Ich arbeite in keinem Editor ohne die Farben so anzupassen, wie ich es aus dem Dreamweaver gewohnt bin.

Als ich dann auf dem Mac unterwegs war, habe ich mich in TextMate verliebt. Mittlerweile ist TextMate Open Source a.k.a. tot. Nichtsdestotrotz haben wir diesem Editor viel zu verdanken. Das Feature der automatisch schließenden Klammer, sobald eine Öffnende eingetippt wurde, ist z.B. in den JetBrains IDEs erst umgesetzt worden, nachdem ein ehemaliger TextMate-User einen Feature-Request dazu aufgesetzt hat.

Während eines Praktikums habe ich an einem Windows-Rechner gearbeitet und war auf der Suche nach einer ordentlichen IDE. Die Wahl ist damals auf Komodo Edit gefallen, hauptsächlich weil kostenlos. Ich war auch sehr zufrieden damit, wirklich. Als sich das Programm dann 1 Jahr später – mittlerweile auf dem Mac – partout nicht öffnen lassen wollte, musste eine Alternative her.

Ich schielte – durch Rat eines Kollegen – auf PhpStorm. Und aus heutiger Sicht muss ich Komodo Edit für seinen Totalausfall danken. Wer weiß, ob ich sonst geswitched hätte.

Mittlerweile habe ich nicht nur in PhpStorm, sondern auch in WebStorm (HTML, CSS, JS) und RubyMine (Rails) entwickelt, alle vom Entwickler JetBrains. Ich habe mich vollkommen verliebt und bin froh, dieses Tool für mich entdeckt zu haben. Wenn ich Kollegen beim Coden zusehe und über ihre Tools fluchen höre, kann ich mir ein leichtes Grinsen inklusive besserwisserischem Hinweis auf die JetBrains IDEs selten verkneifen.

Ihr seht ich bin ein angenehmer Zeitgenosse. Aber Schluss mit mir und hin zu den JetBrains IDEs. Was genau macht sie so toll?

Projektbasierte IDE statt Texteditor für Alles

Im Gegensatz zu Sublime Text oder TextMate sind IDEs keine Texteditoren zum schnellen Öffnen und Bearbeiten einzelner Dateien. Entsprechend arbeiten auch die JetBrains IDEs projektbasiert. Beim Anlegen eines solchen werden vorhandene Files durchsucht und indiziert um Funktionen wie die dateiübergreifende Suche performanter zu gestalten.

Dabei ist für fast jeden etwas dabei. Ruby on Rails? RubyMine. PHP, egal ob WordPress, Zend Framework oder irgendwas anderes? PhpStorm. Weiterhin gibt es IntelliJ für Java-Zeug, AppCode für die Entwicklung in Objective-C und noch ein paar weitere.

Features you shouldn’t be forced to live without

Wie bereits erwähnt hat jeder Entwickler seine eigenen Präferenzen, wenn es um die Fähigkeiten seiner IDE geht. Ich kann mittlerweile auf folgende Dinge nicht mehr verzichten (die ich auch noch im Einzelnen erläutern werde):

1. intelligentes Verhalten als Texteditor
2. schnelles Öffnen von Dateien
3. schnelles und flexibles Finden/Ersetzen von Textstellen
4. volle Konfigurierbarkeit von Shortcuts
5. Autocomplete, auch von “einfachen” Wörtern
6. Springen zu Deklarationen
7. Hinweise auf Syntax- und ähnliche Fehler
8. schnelles Refactoring
9. Versionkontrolle, Debugging, etc.
10. Plugin-Architektur

1. Intelligentes Verhalten als Texteditor

Auch mit der Projektorientierung bleibt eine IDE ein Texteditor. Entsprechend sollte hier auch das Hauptaugenmerk liegen.

Auto-Closing von Klammern

Wenn ich eine öffnende Klammer eingebe((, [ oder {), sollte die schließende automatisch eingefügt werden. Wenn ich Text ausgewählt habe und eine öffnende Klammer eingebe, soll diese am Beginn der Auswahl eingefügt werden; das schließende Pendant entsprechend am Ende.

Auto-Closing von HTML-Tags

Auto-Closing sollte auch bei HTML-Tags funktionieren. Ein paar Beispiele? Gern. Ich tippe <ul>. Mir wird automatisch das schließende </ul> hinter dem Cursor eingefügt. Drücke ich jetzt Enter, wird eine Leerzeile erzeugt mit eingerücktem Cursor. Darunter erscheint das schließende </ul>.

Sehr cool finde ich auch die Möglichkeit einfach nur den Tag-Namen einzugeben und durch einen Tab-Trigger zum vollwertigen Tag-Paar expandieren zu lassen. Bei manchen Tags macht ein zusätzliches Attribut mitunter Sinn, z.B. href bei einem Link.

Ganze Zeilen manipulieren und flexible Auswahl

Zeilen müssen per Shortcut gelöscht, dupliziert und nach oben bzw. unten verschoben werden können. Sehr zu schätzen gelernt habe ich auch die Fähigkeit, per Shortcut das Wort auszuwählen, in dem sich der Cursor gerade befindet. Durch weiteres Betätigen des Shortcuts lassen sich immer weiter gefasste Code-Segmente auswählen.

Mehrere Cursor, HTML-Pfad und öffnendes Statement

In das Feature von mehreren Cursorn habe ich mich durch Sublime Text verliebt. Bei den JetBrains IDEs ist es zwar nicht ganz so flexibel umgesetzt, dennoch hin und wieder brauchbar.

Bei komplexen HTML-Dokumenten kann die Anzeige des aktuellen Pfads wertvoll sein.

Was ich auch oft benötige ist die Anzeige des öffnenden Statements zu einem schließenden. Erspart den obligatorischen // end if bla == 17 Kommentar.

Einrücken

Das Einrücken von ausgewähltem Code sollte über die Tabulator-Taste und nicht über Shift-Tab, Alt-Tab oder etwas dergleichen möglich sein. Das hat mich an TextMate schon immer genervt. Wie oft rücke ich einen Batzen Code ein vs. wie oft will ich eine Auswahl durch einen Tabulator-Whitespace ersetzen?

Intelligentes Einrücken ist Pflicht, auch beim Einfügen. Beispiel? Wir haben folgenden Code:

Die ul-Liste soll unter das p-Element im div-Container. Richtig wäre das hier:

Viele Editoren übernehmen aber die Einrückungen des kopierten Blocks, statt sie anzupassen. Fürchterlich.

Ein weiteres Beispiel ist das negative Einrücken über Shift-Tab. Das Besondere dabei: die oberste Zeile ist nicht komplett, sondern nur bis an den Anfang ausgewählt. Manche Editoren können damit nicht umgehen und rücken die oberste Zeile einfach nicht weiter nach links ein:

Die Jetbrains IDEs sind einige der wenigen Editoren, die hier durchgängig intelligent einrücken.

Intelligenter Zeilenanfang und Auto-Formatierung im eigenen Code-Style

Der Shortcut um zum Anfang der Zeile zu kommen (⌘← unter Mac, Strg+Pos1 unter Windows), wird von vielen Editoren als solcher ausgeführt. Viel sinnvoller ist allerdings, wenn dieser Shortcut den Cursor an das erste Nicht-Whitespace Zeichen der Zeile positioniert.

Es sind die kleinen Dinge, die den Unterschied machen 😉 So auch, dass sich der generelle Code-Style in den Einstellungen festhalten lässt. Das fängt bei Whitespaces an und hört bei detaillierten Angaben dazu auf, was auf einer Zeile gelassen werden soll (z.B. if ($hasCheezburger) {echo “yay”;}) und was nicht.

Falls mal etwas aus den Fugen geraten ist oder an einen veränderten Styling Guide angepasst werden muss, lässt sich per Shortcut ein komplettes Dokument neu formatieren. Kann viel Zeit sparen und bringt Konsistenz in euren eigenen Code Style.

Multiples Syntax-Highlighting

Nice to have ist auch das intelligente Erkennen von der gerade benötigten Sprache und das Anpassen des Syntaxhighlighting. Das vermeidet Fehler, wenn z.B. über PHP ein JavaScript-Snippet ausgegeben wird.

Übrigens funktioniert an dieser Stelle nicht nur das Syntaxhighlighting sondern auch alles andere wie z.B. die Live Templates (Erklärung folgt) oder das Auto-Closing von Tags wie gewohnt. Der Kontext wird automatisch erkannt. Dufte.

Live Templates

Oft wiederverwendete Snippets (for-Schleifen, if-Anweisungen, Log-Ausgaben, etc.) sollten angelegt und entsprechend verwaltet werden können. Die JetBrains IDEs benutzen dafür den Namen Live Templates. Dabei lassen sich auch Variablen anlegen, um das Ganze etwas flexibler zu gestalten.

Zen Coding

Mittlerweile unter dem Namen Emmet fortgeführt ist die Syntax des Zen Coding eine unglaubliche Zeitersparnis beim ermüdenden Erstellen von sich wiederholendem HTML-Markup. Nur eine kurze Demonstration: die Zeichenkette ul>5*li>a[href=“tab$”]{Punkt $} gefolgt von einem Tab als Trigger erzeugt folgendes Markup

<ul>
    <li><a href="tab1">Punkt 1</a></li>
    <li><a href="tab2">Punkt 2</a></li>
    <li><a href="tab3">Punkt 3</a></li>
    <li><a href="tab4">Punkt 4</a></li>
    <li><a href="tab5">Punkt 5</a></li>
</ul>

Die JetBrains IDEs kommen direkt mit Support für Zen Coding.

In der Übersicht der Live Templates gibt es zudem einiges an Snippets unter den Gruppen Zen HTML und Zen CSS zu erkunden. Die haben recht wenig mit der Zen Coding Syntax gemein, was sie nicht weniger nützlich macht. Es handelt sich einfach um Kurzformen für z.B. Formular-Elemente, Doctypes, Links, etc. Vermutlich braucht ihr damit nie wieder einen Tag-Namen bzw. eine CSS-Eigenschaft komplett ausschreiben. Ist sehr zu empfehlen.

Den Rest gibt’s im zweiten Teil

Wie wichtig der erste Punkt der obigen Auflistung für mich ist, seht ihr an meinen wortreichen Ausführungen dazu. Ich mache an dieser Stelle einen Break und erläutere die restlichen Punkte in einem zweiten Teil.

Doch jetzt erst die Frage an euch: was sind die wichtigsten Features, ohne die ihr in einem Texteditor oder einer IDE nicht leben könnt?