Code-Editoren im Überblick: Die besten Anwendungen für Windows, Mac und Co.

Dank Do-it-yourself-Lösungen wie Homepage-Baukästen können Nutzer mittlerweile auch ohne besondere Programmierkenntnisse eine einfache Website erstellen. Einsatzfertige Design-Vorlagen und Bedienkomponenten lassen sich in diesen Tools nach Belieben auswählen und per Drag-and-drop positionieren, während der zugrundeliegende Quelltext automatisch generiert wird. Geht es allerdings um die Entwicklung professioneller Websites sind Programmierer mit fundiertem Wissen über HTML, CSS und JavaScript immer noch so gefragt wie eh und je: Im Gegensatz zu Website-Builder-Projekten zeichnen sich professionell programmierte Seiten nämlich durch einen hohen Individualitätsgrad sowie einen sauberen und gut lesbaren Quellcode aus.

Das wichtigste Werkzeug eines jeden Webentwicklers ist dabei zweifelsohne ein Code-Editor, der die benötigten Funktionen enthält und einen hohen Nutzerkomfort bietet – gleichzeitig aber nicht zu aufgebläht mit unnötigen Features ist. Für die unterschiedlichen Betriebssysteme wie Windows, macOS oder Linux werden dabei auch ganz verschiedene HTML-Code-Editoren genutzt.

Klassische Code-Editoren bilden eine Art Zwischenlösung im Vergleich zu einfachen Text-Editoren und komplexen IDEs (Integrierte Entwicklungsumgebungen). Von Erstgenannten heben sie sich durch einen erweiterten Funktionsumfang ab, Letztgenannte umfassen gleich mehrere Tools für die Entwicklung von Software, die untereinander vernetzt sind. Ein Code-Editor ist in diesen komplexen Entwicklungsumgebungen in der Regel zwar ebenfalls integriert – aber eben nur eine von vielen Komponenten.

Auch innerhalb der Gruppe der Code-Editoren gibt es Unterschiede, was insbesondere auf die Vielzahl an Auszeichnungs- und Programmiersprachen zurückzuführen ist. So gibt es beispielsweise Editoren, die sich insbesondere für die Arbeit mit C++, Java oder Python eignen, aber eben auch solche, die speziell auf Webentwicklung und -design zugeschnitten sind. Grundvoraussetzung für solche Editoren ist, dass sie zumindest das Schreiben und Editieren folgender Codes ermöglichen bzw. vereinfachen: HTML, CSS und JavaScript. Eines der typischsten Features von Web-Code-Editoren ist ein sogenannter WYSIWYG-Modus (What You See Is What You Get), der Entwicklern bereits im Vorhinein zeigt, wie der Code später im Browser dargestellt wird.

Weitere Merkmale guter Code-Editoren für Mac und Co. sind:

• Möglichkeit, Projekte in beliebiger Zeichenkodierung zu speichern
• Syntaxhervorhebung für verschiedene Sprachen (im besten Fall konfigurierbar)
• Flexible „Suchen und Ersetzen“-Funktion, die auch reguläre Ausdrücke verarbeiten kann
• Ein- und Ausblendefunktion für logisch zusammengehörende Codeabschnitte (Code-Folding)
• Autovervollständigung von Code (Wörter, Funktionen, Parameter)
• Makro-Editor
• Einfache Verwaltung kompletter Code-Snippets

Code-Editoren sind sehr einfache Programme, die nur wenig Speicherplatz und Systemperformance erfordern. Auf welchem Gerät bzw. welchem Betriebssystem die Programme zum Einsatz kommen, hängt daher grundsätzlich von den Vorlieben des Nutzers ab. Natürlich läuft aber nicht jeder Code-Editor auf allen Betriebssystemen, weshalb die Auswahl beispielsweise dann eingeschränkt ist, wenn Sie ausschließlich nach einem Linux-Code-Editor suchen. Wie bei anderer Software lässt sich außerdem zwischen proprietärer Software, Open-Source-Lösungen sowie Freeware unterscheiden, weshalb die Entscheidung für bzw. gegen einen Web-Code-Editor am Ende häufig auch unter Berücksichtigung der Kosten getroffen wird.

Um Ihnen die Suche nach dem passenden Code-Editor für Ihr Webprojekt zu vereinfachen, stellen wir in den folgenden Abschnitten die wichtigsten Vertreter für die jeweiligen Betriebssysteme sowie einige plattformübergreifende Lösungen vor.

Es existiert eine Reihe von Editoren, die plattformübergreifend einsetzbar sind. Die Entwickler bieten in diesem Fall also verschiedene Installationsdateien für die jeweiligen Systeme an, sodass Sie lediglich die passende Datei auswählen müssen, um das Programm unter Windows bzw. macOS oder Linux zu installieren. Dabei ist es allerdings möglich, dass sich die Editionen von System zu System unterscheiden, sodass bestimmte Funktionen zum Beispiel nur für Linux-Nutzer verfügbar sind.

GNU Emacs bietet aufgrund seiner starken Erweiterbarkeit nicht nur Zugriff auf die standardmäßigen Werkzeuge eines Code-Editors wie Autovervollständigung und Syntaxhervorhebung, sondern – falls gewünscht – auch Zugriff auf Features, die weit über das Schreiben und Editieren von Text und Code hinausgehen. So können Sie dem Programm beispielsweise einen Audioplayer, einen Projekt-Planer und sogar einen Webserver hinzufügen. Eine Besonderheit des Editor-Urgesteins ist die Bedienung über Tastenkürzel, die man sich allerdings in kurzer Zeit aneignen kann. Zudem lässt Emacs weitgehend auch die Steuerung mit der Maus zu.

Brackets bietet die wichtigsten Code-Editor-Funktionen bereits von Werk an: Code-Syntax wird automatisch farblich hervorgehoben – zudem liefert Brackets Vorschläge für Parameter und schließt automatisch Klammern. Über den Reiter „Find“ können Sie alle geöffneten Code-Dokumente nach bestimmten Begriffen oder Code-Passagen durchsuchen und entsprechendes Material bei Bedarf automatisch ersetzen lassen („Replace“). Die „Live Preview“ erlaubt Ihnen darüber hinaus einen Blick darauf, wie Ihr Webprojekt zum aktuellen Bearbeitungsstand aussieht. Wollen Sie den Funktionsumfang des Code-Editors für Mac, Windows und Linux erweitern, nutzen Sie einfach den integrierten Extension-Manager.

Atom ist eng an GitHub geknüpft, weshalb der Code-Editor unter anderem die Möglichkeit bietet, ein GitHub-Verzeichnis für Ihr Projekt anzulegen, ohne dass Sie hierfür die Entwicklerplattform aufsuchen müssen. Auch auf das Versionsverwaltungssystem Git können Sie zurückgreifen, um sämtliche Änderungen am Code im Blick zu behalten, zu testen und – falls notwendig – rückgängig zu machen. Zu den weiteren Grundfunktionen der Software zählen unter anderem Syntaxhervorhebung, automatische Sprachenerkennung, Code-Folding, automatische Text- bzw. Codevervollständigung sowie die Möglichkeit, Begriffe, Ausdrücke und Codeabschnitte projektweit zu suchen und zu ersetzen.

Seit jeher ist das Thema Webentwicklung eng mit UNIX bzw. Linux verknüpft. Entscheidende Web-Tools und -Software wie der Apache-Webserver gehören in nahezu allen Distributionen dieser Betriebssystemfamilie zum Standardrepertoire – zudem sind die administrativen Freiheiten für viele Nutzer ein entscheidender Vorteil gegenüber Windows. Dennoch erfreuen sich auch die Microsoft-Systeme einer nicht unbedeutenden Nutzerbasis, wenn es um die Programmierung und Verwaltung einer neuen Website geht. Das zeigt sich nicht zuletzt auch in der Tatsache, dass es Code-Editoren gibt, die exklusiv für Windows entwickelt wurden.

Bereits in den Werkseinstellungen bietet Notepad++ die elementaren Features eines guten HTML-Code-Editors: Die Syntax diverser Sprachen lässt sich farblich hervorheben, wobei Sie optional auch eigene Hervorhebungsmerkmale definieren können – gleiches gilt für die Gruppierung zusammengehörender Code-Abschnitte. Darüber hinaus bietet Notepad++ eine „Suchen und Ersetzen“-Funktion ebenso wie eine Funktion zur Aufnahme und Wiedergabe von Makros und ein Autovervollständigungs-Feature (Wörter, Funktionen, Parameter). Wenn die entsprechenden Browser installiert sind, lassen sich die in Notepad++ erstellten HTML-Dokumente jederzeit vorab in Firefox, Chrome, Safari oder Internet Explorer betrachten.

Über sogenannte Quick Clips können Sie Ihren Code-Dokumenten in Araneae häufige Elemente und Parameter (wie zum Beispiel Tabellen, Farben oder Fettungen) mit nur einem Klick bzw. via Hotkey hinzufügen, was Ihnen das Code-Schreiben erheblich erleichtert. Wollen Sie sich von der Funktionalität Ihres Codes überzeugen, nutzen Sie die integrierte Vorschau-Funktion, um das aktuelle Dokument vorab im Browser Ihrer Wahl anzuschauen.

macOS, das Betriebssystem von Apple-Geräten wie dem iMac oder dem MacBook ist bei vielen App- und Webentwicklern beliebt. Das liegt insbesondere daran, dass das System als BSD-Abkömmling (Berkeley Software Distribution) diverse UNIX-Entwicklungstools nativ unterstützt. Auch die gute Performance der Apple-Geräte ist ein Grund dafür, Webanwendungen auf einem Mac zu entwickeln. Hinzu kommt die Tatsache, dass sich Apps für iOS nur von einem macOS-Gerät aus programmieren lassen.

Die japanischen Softwarefirma Panic brachte 2007 Coda auf den Markt, einen Code-Editor für Mac-Computer. Zusätzlich zu der Desktop-Anwendung, die Sie im Anschluss an eine einwöchige, kostenfreie Testphase für rund 90 Euro auf der Panic-Website erwerben können, gibt es auch eine App für iOS, die Panic zum Preis von 27,99 Euro im App Store anbietet. Coda deckt die Grundfunktionen eines Code-Editors ab: Neben Syntaxhervorhebung in diversen Sprachen, projektweiter Autovervollständigung und einer schnellen „Suchen und Ersetzen“-Funktion bietet das Programm auch die Möglichkeit, Code ein- bzw. auszuklappen und zu kommentieren. Durch Plug-ins, die größtenteils von der Community entwickelt werden, lässt sich Coda jederzeit erweitern.

Um Nutzern den maximalen Komfort zu bieten, gehen die Features von Coda weit über die eines gewöhnlichen HTML-Code-Editors hinaus: So hat die Software ein eigenes Dateimanagementsystem integriert, das nicht nur das Öffnen und Bearbeiten lokaler Dateien vereinfacht, sondern auch den Zugriff auf Dateien via (S)FTP, WebDAV oder Amazon S3 Server ermöglicht. Dank der Unterstützung von Git und Subversion können Sie mit Coda außerdem jederzeit alle Änderungen an Ihren Dokumenten erfassen. Weitere Extras sind ein eingebautes Terminal, ein HTML-Validator sowie ein MySQL-Editor. Außerdem bietet der Code-Editor für Mac mit der WebKit Preview bzw. AirPreview auch eine Vorschau-Funktion.

Unter den Code-Editoren für Mac ist BBEdit sicherlich ein Urgestein. Die proprietäre Editor-Lösung der amerikanischen Firma Bare Bones Software wurde bereits 1992 als Programm für den OS-X- bzw. macOS-Vorgänger Macintosh System Software 6 vorgestellt. Seitdem wurde die Software kontinuierlich weiterentwickelt, weshalb sie auch noch nach mehr als zwei Jahrzehnten zu den beliebtesten Code-Editoren für Mac-User zählt. Zusätzlich zu der kostenpflichtigen Lizenz-Edition, die rund 45 Euro kostet, bietet Bare Bones Software eine unlizenzierte Demoversion mit eingeschränktem Funktionsumfang, die Sie kostenfrei verwenden und jederzeit upgraden können. Bis 2016 bot der Hersteller zu diesem Zweck den separaten Code-Editor TextWrangler (vormals BBEdit Lite), dessen Support inzwischen eingestellt wurde.

BBEdit bietet eine ausgewogene Mischung an grundlegenden Code-Editor-Funktionen und Zusatzfeatures, die Webentwicklern die Arbeit erheblich erleichtern: So sind Syntax-Highlighting für diverse Sprachen, Autovervollständigung, eine dokumentenübergreifende „Suchen und Ersetzen“-Funktion und Code-Folding ebenso implementiert wie der Dateizugriff via (S)FTP, eine Unterstützung von Git und Subversion oder ein umfangreiches Set an HTML- und CSS-Markup-Tools (inklusive Support für HTML5). Für eine Live-Vorschau des Codes kann man den ebenfalls standardmäßig integrierten WebKit Inspector verwenden. Auch in Sachen Fehlerüberprüfung weiß BBEdit zu überzeugen: Rechtschreibfehler können Sie direkt im Code-Editor mit der macOS-Korrekturfunktion aufdecken, während Sie Fehler im Code Ihrer HTML-Seiten mithilfe des HTML Syntax Checkers beheben.

DroidEdit kann über den Google Play Store heruntergeladen werden, wobei es zwei verschiedene Versionen des Code-Editors für Android gibt: DroidEdit Free ist gänzlich kostenlos, enthält dafür jedoch Werbung. DroidEdit Pro ist kostenpflichtig (knapp über 2 Euro), unterstützt dafür allerdings unter anderem das Versionsverwaltungssystem Git. Zudem stehen Ihnen nach dem Kauf der App (S)FTP-Support sowie Schnittstellen zu den Online-Speicherdiensten Dropbox, Google Drive und Box zur Verfügung.