Wie fange ich an?/Der richtige Code-Editor

Aus SELFHTML-Wiki
Wie fange ich an?(Weitergeleitet von Code-Editor)
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

Die Entscheidung für oder gegen einen Editor ist häufig stark von den persönlichen Vorlieben des Einzelnen abhängig. Daher gibt es nicht „den perfekten Editor“. Häufig verwendete, kostenlose bzw. teilweise auch freie Editoren sind:

  • Visual Studio Code Flexibel konfigurierbarer und durch eine Vielzahl von Erweiterungen anpassbarer Editor für Windows, macOS und Linux.
  • VSCodium Version von Visual Studio Code ohne proprietäre Bestandteile und Tracking.
  • Notepad++ Erweiter- und konfigurierbarer Editor für Windows mit dem Fokus auf geringe Resourcennutzung.

Die hier genannten Editoren stellen nur einen Ausgangspunkt dar – Auch hier nicht aufgeführte Editoren können sich gut für Webentwicklung eignen.

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)

Abgerufen am 17.06.2025
von "http://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Der_richtige_Code-Editor"