Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Wie fange ich an?/Der richtige Code-Editor

Aus SELFHTML-Wiki
Wie fange ich an?(Weitergeleitet von IDE)
Wechseln zu: Navigation, Suche

Ein Code-Editor ist ein spezialisiertes Textbearbeitungsprogramm für Programmierer. Anders als ein normales Textprogramm (wie Word) kann ein Code-Editor deinen HTML-, CSS- und JavaScript-Code lesen und dir dabei helfen, schneller und ohne Fehler zu arbeiten.

Ein normaler Text-Editor bietet weder Fehlerprüfung noch Farbhervorhebung. Da er nicht für Code gemacht wurde, ist er langsam und unkomfortabel.

Das brauchst du in einem Code-Editor

Nicht alle Code-Editoren sind gleich gut. Du solltest darauf achten, dass der Code-Editor dir die Arbeit erleichtert:

Syntax-Highlighting

Syntaxhervorhebung verbessert die Lesbarkeit von Texten:[1]

Der Editor zeigt HTML-Tags, CSS-Eigenschaften und JavaScript-Befehle in verschiedenen Farben. So erkennst du auf einen Blick, wo dein Code ist und wo Fehler sein könnten.

  • 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.

Zeilennummern und Code-Folding

Jede Zeile hat eine Nummer. Wenn es einen Fehler gibt, kann dir der Browser genau sagen: "Fehler in Zeile 42" – dann findest du ihn sofort!

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.

Datei- und Ordner-Manager

Der Editor zeigt deine Projekt-Ordnerstruktur in einer Seitenleiste. So kannst du schnell zwischen Dateien wechseln.

Automatische Vervollständigung

Wenn du anfängst zu tippen, schlägt der Editor automatisch vor, was du vermutlich meinst. Das spart Zeit!

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

Suchen & Ersetzen

Du kannst schnell nach Text suchen und ihn überall im Projekt ersetzen. Super praktisch!


Empfohlene Code-Editoren

Du brauchst kein teures Programm. Es gibt viele großartige kostenlose Optionen.[2][3]

VS Code

Visual Studio Code ist der beliebteste Code-Editor der Welt! Kostenlos, mächtig, aber anfängerfreundlich.

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 +

Notepad++ ist super leicht, schnell, perfekt für Anfänger. Es ist ein erweiter- und konfigurierbarer Editor – allerdings nur für für Windows – mit dem Fokus auf geringe Resourcennutzung.

Eine Entwicklungsumgebung schaffen

Früher konnte man Webseiten einfach direkt von der Festplatte öffnen (file://), wenn sie nur aus HTML bestanden. Heute funktioniert das oft nicht mehr, weil z. B. Schriftarten oder andere Script-Dateien vom Browser blockiert werden, wenn sie nicht aus sicheren Quellen stammen (Same-Origin-Policy).

Deshalb ist es sinnvoll, eine integrierte Entwicklungsumgebung (auch IDE (Integrated Development Environment genannt) aufzubauen.

Nutze von Anfang einen lokalen Webserver (z.B. VS Code Live Server)!

Empfehlung: Ordne deine Versionen.

Wenn dein Projekt größer wird, erstelle Ordner für:

  • entwicklung/ – Deine aktuelle Arbeit
  • live/ – Die Version auf dem echten Server
  • archiv/ – Alte Versionen (zur Sicherheit)
  • SELF-Hosting


    (Eigener PC als Webserver)

    • Technische Voraussetzungen
    • Sicherheitsaspekte
     
  • Webserver lokal einrichten
    • eingebauter PHP-Server
    • XAMPP
    • Alternativen wie LAMP
    • IIS-Server unter Windows
     

Web-Labor

Wenn du lediglich ein paar einfache Dinge ausprobieren willst, ist eine vollständige Entwicklungsumgebung oftmals gar nicht erforderlich. Verwende stattdessen eins der frei zugänglichen, aber englischsprachigen Web-Labore.


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. ↑ Die Frage nach dem perfekten Editor lässt sich nicht abschließend beantworten, wird im Forum jedoch immer wieder diskutiert:
  3. ↑ Früher beliebte Editoren wie Phase 5 von 2009 und Homesite beherrschen kein UTF-8 und verwendeten eine aus der ISO-8859-Familie oder Windows-1252. Damit ließen sich 256 Zeichen definieren, aber eben keine Sonderzeichen aus anderen Sprachen, neben exotischeren Sonderzeichen auch kein €-Zeichen!. Heute ist UTF-8 ein Standard, mit dem alle Sprachen und viele Zeichen und Emojis dargestellt werden können.

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