Wie fange ich an?/Der richtige Code-Editor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der erste praktische Schritt hin zur eigenen Webseite ist das Schaffen einer Entwicklungsumgebung, in der man HTML-Dokumente, Stylesheets und Skripte schreiben und testen kann. Dafür verwendet man heutzutage Code-Editoren, die mehr können als nur Texte zu erfassen und zu speichern.

Dieses Kapitel vermittelt, welche Fähigkeiten ein Code-Editor haben muss und listet einige Empfehlungen der SELF-Community auf.

Code-Editor

Die meiste Zeit verbringt der Webdesigner mit seinem Code-Editor, der mindestens dazu geeignet ist, HTML-, CSS- und JS-Code zu editieren. Darunter fallen also nicht nur Texteditoren, sondern auch WYSIWYG-Editoren und ganze IDEs (Integrated Development Environments), also integrierte Entwicklungsumgebungen.

Welcher Code-Editor ist der Beste?

Diese Frage lässt sich nicht abschließend beantworten, wird im Forum jedoch immer wieder diskutiert:

Die wichtigsten Merkmale eines guten Editors sind:

  • speichern in beliebigem Zeichen-Encoding
  • konfigurierbares Syntax-Highlighting für viele verschiedene Sprachen
  • sehr flexible Suche/Ersetze-Instrumente inklusive regulärer Ausdrücke
  • Ansichten-Management wie das Code-Folding
  • Makro-Editor
  • Verwaltung von Codesnippets


Empfehlung: Stellen Sie Ihren Editor auf eine Zeichencodierung im UTF-8-Format ein und vergessen Sie nicht, Ihre Webdokumente auch in diesem Format abzuspeichern. Dies ist eine der häufigsten Fehlerquellen, die im Forum immer wieder zur Sprache kommt.

Syntax-Highlighting

Syntaxhervorhebung verbessert die Lesbarkeit von Texten:[1]

  • Strukturen im Text sind leichter zu erkennen,
  • das „Querlesen“ wird vereinfacht,
  • Kommentare erscheinen abgesetzt vom eigentlichen Code und
  • Tippfehler fallen schneller auf, da in vielen Fällen ein Tippfehler zu einer veränderten Darstellung führt.

Die Syntaxhervorhebung gehört heutzutage zur Standardfunktionalität vieler integrierter Entwicklungsumgebungen und Texteditoren.

Autovervollständigung

Intelligente Editoren erfassen den Text und antizipieren die nächsten Eingaben, indem sie lange Wörte automatisch vervollständigen oder eine Eingabe möglicher Alternativen vorschlagen.

Parallel findet oft eine Überprüfung der Syntax statt, die einem so manche vergessene Klammer vorschlägt und so die Testphase verkürzt.

Code-Folding

Umfangreiche Webseiten und mächtige Scripte nehmen oft viele hundert Zeilen Code ein und werden so unübersichtlich.

Deshalb bieten gute Editoren das so genannte Code-Folding an, mit dem bestimmte Abschnitte wie Script- oder Style-Bereiche, Funktionen und Daten-Objekte eingeklappt werden können. So erspart man sich langes Scrollen durch viele Zeilen Code auf der Suche nach einer bestimmten Stelle.

Live Preview

Früher konnte man im Macromedia Dreamweaver, in Frontpage oder gar MS Word Text in einem WYSIWYG-Editor eingeben und als HTML ausgeben lassen. Der so erzeugte Code war allerdings gruselig. Trotzdem ist es auf Dauer zu mühselig, ein HTML-Dokument immer wieder zwischenzuspeichern, zum Browser zu wechseln und das Dokument mit F5 neu zu laden, um das Ergebnis anzusehen.

Der kostenlose Editor brackets.io ermöglicht eine Live Preview mit dem als Standard festgelegten Browser.

  1. Installieren Sie brackets.io
  2. Gehen Sie auf debug > Einstellungsdatei öffnen
  3. In dieser json-Datei suchen Sie "livedev.multibrowser" und setzen es auf true
    "livedev.multibrowser": true
  4. Rechts oben neben dem Quelltext finden Sie einen grauen Blitz - drücken Sie ihn!

Jetzt öffnet sich Ihr Standard-Brwoser und Änderungen am Code werden sofort im Browser angezeigt. Sie müssen erst auf Speichern drücken, wenn Sie mit dem Ergebnis zufrieden sind!

Leerzeichen, Tabulatoren und Zeilenumbrüche

Wenn Sie einen Texteditor oder einen quelltextorientierten HTML-Editor zur Erstellung Ihrer HTML-Dateien verwenden, sollten Sie folgende Regeln bei der Texteingabe kennen und beachten:

  • Setzen Sie Zeilenumbrüche und Leerzeilen so, dass Sie im Quelltext eine optimale Übersicht behalten. Beachten Sie aber auch, dass Zeilenumbrüche und Absatzschaltungen im Web-Browser nicht so angezeigt werden, wie sie im Quelltext eingegeben wurden. Für Zeilenumbrüche und Absatzschaltungen, die im Browser wirksam sein sollen, müssen Sie die entsprechenden HTML-Elemente verwenden. Wenn Sie aus besonderen Gründen Text im Web-Browser so anzeigen wollen, wie Sie ihn eingeben (mit allen Einrückungen, Umbrüchen usw.), können Sie das pre-Element für präformatierten Text verwenden.
  • Beachten Sie, dass es in HTML keine Tabulatoren gibt. Ein im Quelltext eingegebener Tabulator wird bei der Anzeige im Web-Browser in ein Leerzeichen umgewandelt. Zeilenumbruch-Zeichen, Tabulator-Zeichen und einfache Leerzeichen bilden in HTML die Klasse der so genannten White-Space-Zeichen (white space = "weißer Raum"). Die Browser setzen in der Regel ein Tabulator-Zeichen oder Zeilenumbruch-Zeichen im Editor als Leerzeichen im HTML-Text um. Mehrere solcher White-Space-Zeichen hintereinander werden ignoriert und zu einem einzigen Leerzeichen zusammengefasst. Um mehrere Leerzeichen hintereinander zu erzwingen, können Sie anstelle der normalen Leerzeicheneingabe die Zeichenfolge   (geschütztes Leerzeichen) eingeben, und zwar so oft hintereinander wie gewünscht. Das sollte aber wirklich ein Ausnahmefall bleiben, da diese Gestaltung besser mit CSS umgesetzt wird.

Hauptartikel: Guter HTML-Stil

Eine Entwicklungsumgebung schaffen

Es ist eine sehr schlechte Praxis, direkt auf einem öffentlich erreichbaren Server zu entwickeln. Am Anfang der Realisierungsphase steht deshalb die Einrichtung einer dem öffentlichen Webserver analogen Entwicklungsumgebung. Dazu müssen alle Komponenten, die später auf dem öffentlichen Webserver betrieben werden, auch auf dem lokalen System vorhanden sein. Dies betrifft namentlich:

Früher konnte man, wenn man nur statische Webseiten erstellte, darauf noch verzichten. Heute ist es nicht mehr möglich Schriftarten und andere externe Dateien von lokalen Webseiten (d.h., die direkt von der Festplatte gestartet werden), einzubinden.

Deshalb sollte man sich gleich einen Testserver einrichten.

Es ist zudem ratsam, auf dem lokalen System nochmals zu unterscheiden:

  • Die zu entwickelnde Version
  • Die freigegebene Version, welche identisch zur öffentlichen Version ist.
  • Archivierte (ältere) Versionen

Zur Entwicklungsumgebung gehört auch geeignete Software.

In der Realisierungsphase werden zudem sehr viele kleine Testobjekte erstellt. Dazu muss man sich eine strukturierte Spielwiese erstellen, die von der zu entwickelnden Website separiert ist.

Dokumentation spielt eine große Rolle. Dokumentationen dienen dem Ersteller und Betreiber. Dokumentationen sind selbst gute Beispieltexte, an welchen die Struktur einer Website und ihre Formatierung entwickelt werden kann. Kommentieren Sie Ihren Code, damit Sie ihn später nachvollziehen können.

Entwickeln auf dem Tablet

Auch wenn Webseiten auf allen Geräten getestet werden müssen, ist das Arbeiten auf solchen Geräten gewissen Einschränkungen unterworfen. Empfehlenswert ist hier zumindest eine externe Tastatur und ein weiterer Bildschirm, bzw. sogar die Koppelung mit einem Desktop-PC.[2] [3]


Web-Labor

Wenn Sie lediglich ein paar einfache Dinge ausprobieren wollen, ist eine vollständige Entwicklungsumgebung oftmals gar nicht erforderlich. Statt dessen können Sie eins der frei zugänglichen, aber englischsprachigen Web-Labore verwenden, wie z.B.

Zum Ausprobieren der Beispiele im Selfhtml Wiki haben wir eine eigene Spielwiese erstellt, die sich auch ohne vorgegebenen Inhalt starten lässt und in denen Sie gerne Ihre ersten Schritte zusammenfrickeln können:

Warum online-Beispiele besser als das Posten von Code sind!

Das SELF-Forum ist die Anlaufstelle, wenn etwas mit dem eigenen Code nicht klappt.

Häufig posten Anfänger dann entweder zu kurze Code-Blöcke, da sie nicht wissen, wo der Fehler liegt, oder, schlimmer, posten die gesamte Webseite innerhalb eines oder mehrerer sehr langer Code-Blöcke. Diese lässt sich so nicht auf Fehler untersuchen, ohne dass der Helfende den Code und die Skripte in eine Datei kopiert und dieses ausführt.

Wenn Hilfesuchende ihren Code in einem Online-Beispiel veröffentlichen, ist es möglich, …

und häufig schnell eine Lösung finden.

Online-Entwicklungsumgebungen

Kostenloses Hosting


Weblinks

  1. ↑ Wikipedia: Syntaxhervorhebung
  2. ↑ chip.de: So einfach koppeln Sie jetzt den Windows-PC mit Ihrem Android-Smartphone
  3. ↑ How to get Started with Web Development on Android (appuals.com)

Plattformübergreifende Editoren

Es folgt eine unvollständige Liste verbreiteter leistungsfähiger Editoren; die meisten laufen auf den gängigen Betriebssystemen, wie MS Windows, MacOS und natürlich auf Linux:

Atom
für MS Windows, MacOS und Linux: Atom ist ein kostenloser Open-Source Texteditor mit vielen Erweiterungen und Sprachunterstützungen nach dem Vorbild von Sublime Text.
Brackets
für MS Windows, MacOS und Linux: Brackets ist ein kostenloser Editor von Adobe (sozusagen der "kleine Bruder" von Dreamweaver), der selber auf HTML, CSS und JavaScript basiert und sich entsprechend auch anpassen und ausbauen lässt. Auch funktionieren aus der Webentwicklung bekannte Debugging-Werkzeuge.
Brackets ist kein Allrounder, sondern auf Frontend-Entwicklung optimiert (HTML, CSS und JavaScript). Hierbei unterstützt er den Entwickler sehr gut und ist andererseits überschaubar im Funktionsumfang und daher auch für Einsteiger gut geeignet.
Mit Bordmitteln ist Brackets in der Lage, Änderungen in einer "Livevorschau" direkt im Browser anzuzeigen, während man diese tippt, was nicht nur Anfängern hilft, da Änderungen sich unmittelbar auswirken.
Codelobster
für MS Windows, MacOS und Linux: Codelobster ist ein freier Code-Editor, der aufgrund der großen Anzahl Plugins zur Unterstützung beliebter Frameworks auch als "Integrierte Entwicklungsumgebung" (engl.: Integrated Development Environment – IDE) bezeichnet werden darf.
Dreamweaver
für MS Windows und Mac OS: Dreamweaver ist ein sehr teurer (mehrere Hundert Euro pro Jahr) und sehr guter WhatYouSeeIsWhatYouGet-HTML-Editor.
Eclipse
für MS Windows, MacOS und Linux und viele mehr, da auf Java basierend. Eclipse ist ein IDE (siehe Codelobster) für sehr viele Sprachen und hat einen sehr großen Funktionsumfang. Je nach Ausstattung ist allein der Download über 100 MB groß.
Emacs
für MS Windows, MacOS und Linux und viele mehr: Emacs (bzw. Xemacs) ist einer der mächtigsten Texteditoren, unterstützt sehr viele Sprachen und ist kostenlos. Alle textbearbeitungsrelevanten Eigenschaften, die andere Texteditoren bieten, werden in der Regel auch von Emacs unterstützt und noch viele mehr. Der Preis für die große Funktionalität ist allerdings die Gewöhnungsbedürftigkeit, da seine Steuerung einem völlig anderen Konzept unterliegt als die der meisten anderen bekannten Texteditoren.
Geany
kostenlos für MS Windows, MacOS, Linux und viele mehr. Geany ist zunächst ein simpler Quelltext-Editor mit Syntax-Highlighting, beherrscht aber auch das Zusammenfalten des Codes (Codefolding) und unterstützt dabei eine Menge an Sprachen, sowohl Auszeichnungssprachen, als auch Script- bzw. Programmiersprachen. In diesem Zusammenhang kann er auch automatisches Vervollständigen von Code und ist damit ein sehr hilfreiches Werkzeug, das als IDE verwendet werden kann. Außerdem unterstützt er (zumindest auf unixartigen Systemen) das Suchen in Dateien und Verzeichnissen.
jEdit
für MS Windows, MacOS und Linux und viele mehr, da auf Java basierend. jEdit ist ein freier Texteditor, der durch seine Vielzahl an Plugins auch als IDE bezeichnet werden darf.
Kate
für MS Windows, MacOS, Linux und Unix: Kate ist ein quelloffener und kostenloser Texteditor mit vielen Funktionen; dabei in den Standardeinstellungen aber einfach und übersichtlich gehalten. Menüführung und die ausführliche Dokumentation sind ins Deutsche übersetzt. Durch die einstellbare Benutzeroberfläche und das implementierte Modulsystem lässt er sich leicht auf gehobenere Ansprüche anpassen. Standardmäßig vorhanden: Syntaxthervorhebung, automatische Rechtschreibprüfung, gleichzeitiges Anzeigen und Bearbeiten mehrerer Dokumente durch horizontale und vertikale Teilung des Arbeitsbereichs; viele Module (eingebettetes Terminal, SQL-Modul, Erstellen-Modul, GDB-Modul, Ersetzen in Dateien und anderes). Weiter: Multi-Dokument-Schnittstelle (MDI), Unterstützung für Sitzungen, Unterstützung für Unicode und viele andere; auch bi-direktionale Anzeige von Schriften, Unterstützung für Zeilenenden unter Windows, Linux, Unix, MacOS, einschließlich automatischer Erkennung, Netzwerktransparenz, Öffnen von Dateien auf fremden Rechnern, Erweiterungsfähigkeit durch Skripte und vieles, vieles mehr (siehe Link oben).
neovim
für MS Windows, MacOS, Linux und Unix: neovim ist ein (Zitat) "neuer openSource (MIT-Linux-Editor, der den in die Jahre gekommenen Vim-Editor (siehe unten) ablösen soll. Neovim soll schlanker, schneller, stabiler und pluginfähiger werden, als der schon stark nach Kukident müffelnde Vim-Editor."
SciTE
für MS Windows und Linux: SciTE, ein kleiner Freeware-Texteditor, der trotz seiner geringen Größe über viele Funktionen verfügt.
Sublime Text
für MS Windows, MacOS und Linux: Sublime Text ist ein mächtiger Editor mit vielen Erweiterungen und umfänglicher Anpassbarkeit an die Vorlieben des Nutzers.
UltraEdit
für MS Windows, MacOS und Linux: UltraEdit ist ein kostenpflichtiger (ca. 85 Euro/Jahr) Texteditor; auch in Deutsch verfügbar.
Vim
für MS Windows, MacOS, Linux und Unix: Für (den schon etwas "in die Jahre gekommenen") Vim bzw. Gvim (siehe oben: neovim) gilt im Prinzip das gleiche wie für Emacs (siehe oben: Emacs). Allerdings ist Vim etwas verbreiteter, weil er im Allgemeinen zur Standardausrüstung jeder Linux-Distribution gehört. Vim ist auch in Deutsch verfügbar.
Visual Studio Code
für MS Windows, MacOS und Linux: Microsoft Visual Studio Code ist ein kostenloser, quelloffener Code-Editor zum Entwickeln und Debuggen moderner Cloud- und Webanwendungen. Nachteil: er flüstert "nach Hause", denn der Qellcode ist zwar openSource, jedoch nicht die Installationspakete, mit denen er auf Betriebssystem gelangt. Das ist eigentlich nicht schlimm, denn unten folgt die 100-prozentig openSource-Alternative (VSCodium) ...
VSCodium
für MS Windows, MacOS und Linux: VSCodium ist (Zitat) ein "genialer, sehr mächtiger, mit Plugins übelst erweiterbarer und eine wirklich 100-prozentige open-Source-Variante (MIT) des von Microsoft angebotenen Visual Studio Code Editor, bei dem der Quellcode zwar openSource ist, die Installationspakete aber eben nicht." Deswegen wurde VSCodium auch ohne die bei Microsoft bekannten Telemetry-Tracking-Funktionen codiert.
Erneut Zitat aus obigem Link: "VSCodium ist plattformunabhängig, unterstützt die gängigsten Programmiersprachen, es gibt ein eingebautes Command Line Interface (CLI) und man kann den Editor mit Themes und Erweiterungen sogar für Docker, Ansible und Vagrant klar machen."

Editoren für MS Windows

Die hier aufgelisteten Texteditoren/IDEs sind in der Regel für alle MS-Windows-Versionen zu haben.

Notepad++
OpenSource-Editor mit frei definierbarem Syntax-Highlighting für viele Sprachen.
Notepad2
Freeware-Texteditor, dessen Stärke darin liegt, schnell geladen zu sein. Der Preis dafür ist, dass es nur wenige Features gibt. So bietet er weder Code-Vervollständigung noch Code-Folding und kann z. B. nicht mehrere Dateien gleichzeitig öffnen.
PSPad
Freeware-Texteditor, dessen Installer zwar nicht mal 4 MB groß ist, der aber trotzdem die meisten Bearbeitungsmöglichkeiten bietet, wie die anderen Texteditoren auch.

Editoren für Linux / Unix-Derivate

Alle guten und oben erwähnten Editoren sind für Linux und Unix verfügbar; werden ja meist hauptsächlich für Linux programmiert. Da sie aber natürlich immer openSource sind, laufen die meisten auch auf MS Windows und MacOS.

Editoren für Macintosh

BBEdit
kostenpflichtiger (ca. 44 Euro) Texteditor mit u.a. integriertem FTP-Client, Rechtschreibprüfung und HTML-Syntax-Checker.
Coda 2
kostenpflichtiger (ca. 99 Dollar) Editor mit dem Fokus auf Webentwicklung, mit dem Anspruch sich nahtlos in MacOSX zu integrieren.
TextMate
Freeware-Texteditor, der Projektverwaltung und vieles mehr bietet.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Wie_fange_ich_an%3F/Der_richtige_Code-Editor&oldid=98721“