Dokumentation

Installation #

Laden Sie das Installationsprogramm für Ihr System auf der Seite Downloads herunter.

macOS

1. Öffnen Sie die heruntergeladene .dmg-Datei und ziehen Sie Eclipse Code in „Programme“.
2. Beim ersten Start blockiert macOS die App, weil Apple sie noch nicht notarisiert hat. Öffnen Sie Systemeinstellungen → Datenschutz & Sicherheit, scrollen Sie nach unten und klicken Sie auf Trotzdem öffnen (bei älteren macOS-Versionen: Rechtsklick auf die App und Öffnen wählen).
3. Meldet macOS weiterhin, die App sei beschädigt, führen Sie diesen Befehl im Terminal aus:

xattr -cr "/Applications/Eclipse Code.app"

Windows

1. Führen Sie die heruntergeladene .exe aus und folgen Sie den Schritten. Sie können den Installationsordner wählen.
2. Wenn SmartScreen erscheint, klicken Sie auf Weitere Informationen und dann auf Trotzdem ausführen (die App ist noch nicht signiert).

Voraussetzungen

• macOS 12 oder neuer bzw. Windows 10 oder neuer (64-Bit).
• Zum Debuggen muss Node.js installiert sein.
• Für die Vorschau von Framework-Projekten (Vite, Next.js …) müssen Node.js und npm installiert sein.

Erste Schritte #

1. Öffnen Sie einen Ordner mit Datei → Ordner öffnen (⌘K ⌘O / Strg+K Strg+O) oder mit der +-Schaltfläche in der oberen Leiste.
2. Klicken Sie im Explorer auf eine Datei, um sie zu öffnen. Bearbeiten Sie sie und drücken Sie ⌘S / Strg+S zum Speichern.
3. Drücken Sie ⇧⌘P / Strg+Umschalt+P, um die Befehlspalette zu öffnen, und ⌘P / Strg+P, um per Namen zu einer beliebigen Datei zu springen.

Die Oberfläche #

• Projektleiste (oben): ein Tab pro Projekt. Mit + öffnen Sie einen weiteren Ordner in einem neuen Tab.
• Aktivitätsleiste (links): Explorer, Suche, Ausführen und Debuggen, Terminal und Einstellungen (Zahnrad).
• Seitenleiste: der Datei-Explorer, Suchergebnisse oder die Debugger-Ansichten.
• Editor: Datei-Tabs oben. Die Augen-Schaltfläche oben rechts öffnet die Website-Vorschau.
• Unterer Bereich: Probleme, Ausgabe, Debugkonsole und Terminal.
• Statusleiste: Zähler für Terminal und Probleme, aktueller Ordner, Cursorposition, Einrückung, Codierung, Zeilenende, Sprache und die Schaltfläche „Aktualisieren“.

Projekte und Tabs #

Jedes Projekt ist ein Ordner mit eigenen geöffneten Dateien, eigenem Explorer, eigenen Terminals und eigener Vorschau. Wechseln Sie zwischen ihnen, ohne ein zweites Fenster zu öffnen.

• Öffnen Sie einen weiteren Ordner in einem neuen Tab mit ⇧⌘N / Strg+Umschalt+N oder der +-Schaltfläche. Ein bereits geöffneter Ordner wird einfach angezeigt.
• Wechseln Sie per Klick oder mit ⇧⌘] / ⇧⌘[ (Strg+Umschalt+Bild↓/↑ unter Windows).
• Schließen Sie ein Projekt mit seinem × oder ⇧⌘W / Strg+Umschalt+W. Sie werden gefragt, ob ungespeicherte Änderungen gespeichert werden sollen, und die Terminals des Projekts werden geschlossen.
• Ein Punkt auf einem Projekt-Tab bedeutet, dass es ungespeicherte Dateien enthält.

Bearbeiten #

Der Editor ist Monaco, dieselbe Engine wie in Visual Studio Code – die Bearbeitungskürzel funktionieren daher genauso.

• Syntaxhervorhebung für Dutzende Sprachen, Codevervollständigung für JavaScript, TypeScript, JSON, CSS und HTML, farbige Klammerpaare und eine Minimap.
• Mehrere Cursor, Zeilen verschieben/kopieren, Kommentieren, Suchen und Ersetzen (siehe Tastenkombinationen).
• Formatieren Sie ein Dokument mit Editor: Dokument formatieren in der Befehlspalette.
• Ein Punkt auf einem Datei-Tab bedeutet ungespeicherte Änderungen. ⇧⌘T / Strg+Umschalt+T öffnet den zuletzt geschlossenen Tab erneut.
• Ändert sich eine Datei auf dem Datenträger, wird sie beim Zurückkehren in die App neu geladen (außer Sie haben darin ungespeicherte Änderungen).
• Binärdateien und Dateien über 5 MB werden nicht im Editor geöffnet.

Aktivieren Sie in den Einstellungen Automatisch speichern, um nach kurzer Verzögerung oder beim Fokusverlust des Fensters zu speichern.

Suche #

Drücken Sie ⇧⌘F / Strg+Umschalt+F, um alle Dateien des aktuellen Projekts zu durchsuchen.

• Verwenden Sie die Schaltflächen Aa (Groß-/Kleinschreibung), ab (ganzes Wort) und .* (regulärer Ausdruck).
• Die Ergebnisse sind nach Dateien gruppiert, mit Syntaxfarben und hervorgehobenem Treffer. Klicken Sie auf einen Treffer, um dorthin zu springen; ein Klick auf einen Dateinamen klappt dessen Ergebnisse zu.
• Ordner wie node_modules, .git, dist, build, out, .next, .cache, __pycache__, .venv und target werden übersprungen, ebenso Binärdateien und Dateien über 1 MB.
• Es werden bis zu 2000 Treffer angezeigt.

Codierungen und Zeilenenden #

Akzente, Symbole und Emoji funktionieren sofort. Dateien werden als eine dieser Codierungen erkannt: UTF-8, UTF-8 mit BOM, UTF-16 LE/BE, Windows-1252, ISO 8859-1 oder ISO 8859-15 – und in derselben Codierung zurückgespeichert.

• Die aktuelle Codierung steht in der Statusleiste. Klicken Sie darauf für Mit Codierung erneut öffnen (wenn eine Datei unlesbar aussieht) oder Mit Codierung speichern.
• Speichern Sie in einer Codierung, die manche Zeichen nicht darstellen kann, werden diese durch ? ersetzt und Sie erhalten eine Warnung. Speichern Sie als UTF-8, um sie zu behalten.
• Das Zeilenende (LF oder CRLF) steht in der Statusleiste. Ändern Sie es mit Editor: Zeilenenden umwandeln in der Befehlspalette.

Terminal #

• Öffnen oder verbergen Sie das Terminal mit Strg+` oder der Schaltfläche Terminal in der Statusleiste. Es öffnet sich im Projektordner.
• Klicken Sie neben den Terminal-Tabs auf +, um ein weiteres Terminal hinzuzufügen, und auf das × eines Tabs, um es zu schließen.
• Jedes Projekt hat eigene Terminals; sie laufen weiter, wenn der Bereich ausgeblendet ist oder Sie das Projekt wechseln.
• Die Shell ist unter macOS Ihre Login-Shell (z. B. zsh) und unter Windows PowerShell, jeweils mit aktiviertem UTF-8.
• Ziehen Sie den oberen Rand des Bereichs, um die Größe zu ändern.

Debugging (Node.js) #

Der integrierte Debugger führt JavaScript-Dateien (.js, .mjs, .cjs) mit Node.js aus. Node.js muss installiert sein.

1. Klicken Sie in den Rand links neben einer Zeilennummer, um einen Haltepunkt zu setzen (ein roter Punkt), oder drücken Sie F9. Haltepunkte bleiben zwischen Sitzungen erhalten.
2. Öffnen Sie die Datei und drücken Sie F5 (oder Debugging starten in der Ansicht Ausführen und Debuggen). Die Datei wird zuvor gespeichert.
3. Die Ausführung hält am Haltepunkt an und die Zeile wird hervorgehoben. Nutzen Sie die schwebende Leiste oder die Kürzel zum Fortsetzen, Prozedurschritt F10, Einzelschritt F11 und Rücksprung ⇧F11.

Ansicht „Ausführen und Debuggen“

• Variablen: die Werte im aktuellen Gültigkeitsbereich, bei Objekten und Arrays aufklappbar.
• Überwachung: Klicken Sie auf +, um einen Ausdruck hinzuzufügen, der bei jedem Anhalten neu ausgewertet wird.
• Aufrufstapel: Klicken Sie auf einen Frame, um dessen Variablen und Code zu sehen.
• Haltepunkte: alle Haltepunkte; klicken Sie auf einen, um ihn zu öffnen, oder auf das ×, um ihn zu entfernen.

Debugkonsole

Zeigt die Programmausgabe und erlaubt das Auswerten von Ausdrücken. Im angehaltenen Zustand werden Ausdrücke im ausgewählten Stack-Frame ausgeführt.

Website-Vorschau #

Klicken Sie oben rechts im Editor auf die Augen-Schaltfläche (oder drücken Sie ⇧⌘V / Strg+Umschalt+V), um neben Ihrem Code eine Live-Vorschau zu öffnen. Die Schaltfläche erscheint bei Webprojekten und wenn eine HTML- oder SVG-Datei geöffnet ist.

HTML-Seiten

Der Projektordner wird unter einer lokalen Adresse bereitgestellt, sodass CSS, JavaScript, Bilder und Schriften normal geladen werden. Die Seite lädt beim Speichern und während des Tippens neu, schon vor dem Speichern. Dateien wie .git und .env werden nie ausgeliefert.

Framework-Projekte

Hat die package.json ein Skript dev, start oder serve und ein bekanntes Framework (Vite, Next.js, Create React App, Vue CLI, Nuxt, Astro, Angular, Parcel, Gatsby, SvelteKit, Remix, Docusaurus …), führt Eclipse Code das Skript in einem Terminal namens Dev-Server aus, erkennt die ausgegebene Adresse und zeigt die Seite an. Fehlt node_modules, wird angeboten, zuerst npm install auszuführen.

• Die Vorschauleiste enthält Zurück, Vorwärts, Neu laden, ein Adressfeld, „Im Browser öffnen“ und Schließen.
• Bei Entwicklungsservern gibt es zusätzlich Schaltflächen, um die Serverprotokolle anzuzeigen und den Server zu beenden.
• Jedes Projekt behält seine eigene Vorschau. Links zu anderen Websites öffnen sich in Ihrem Standardbrowser.

Probleme und Ausgabe #

Der Bereich Probleme (⇧⌘M / Strg+Umschalt+M) listet Syntaxfehler und Warnungen der geöffneten Dateien (JavaScript, TypeScript, JSON, CSS, HTML). Klicken Sie auf einen Eintrag, um dorthin zu springen. Die Statusleiste zeigt die Summen.

Der Bereich Ausgabe (⇧⌘U / Strg+Umschalt+U) protokolliert Ereignisse wie gespeicherte Dateien, geöffnete Ordner, Codierungen, Adressen von Entwicklungsservern und Update-Builds.

Einstellungen #

Öffnen Sie die Einstellungen über das Zahnrad-Symbol oder mit ⌘, / Strg+,. Sie sind in Tabs gegliedert:

• Darstellung: acht Farbdesigns (Eclipse Dark und Light, Dracula, Monokai, Solarized Dark und Light, Nord, High Contrast). Das Design wird sofort angewendet. Standard ist Dunkel.
• Sprache: English, Português, Français, Deutsch und Español, für Oberfläche und Menüs.
• Editor: Schriftgröße, Schriftart, Zeilenumbruch und Klammerfarben.
• Dateien: Automatisch speichern (Aus, Nach Verzögerung oder Bei Fokuswechsel).
• Terminal: Schriftgröße.
• Tastenkombinationen: siehe unten.

Tastenkombinationen #

Die Standardbelegung folgt Visual Studio Code. Um eine zu ändern, öffnen Sie Einstellungen → Tastenkombinationen, klicken Sie auf den Stift neben einer Aktion und drücken Sie die neue Kombination. War sie bereits belegt, wird sie von der anderen Aktion entfernt. Mit den Schaltflächen entfernen oder setzen Sie ein Kürzel zurück, oder nutzen Sie Alle zurücksetzen.

Allgemein

Navigation

Ansicht

Debugging

Editor (Monaco)

Updates #

Die installierte App vergleicht sich mit dem Projektordner, aus dem sie erstellt wurde. Ändert sich dieser Code, erscheint in der Statusleiste die Schaltfläche Aktualisieren. Klicken Sie darauf: Die App erstellt sich neu, ersetzt sich selbst und startet neu.

• Der Quellordner muss noch vorhanden sein, und Node.js und npm müssen installiert sein.
• Speichern Sie zuerst Ihre Arbeit; die App fordert Sie dazu auf, wenn es ungespeicherte Änderungen gibt.
• Sie können auch manuell mit Datei → Nach Updates suchen prüfen. Das ist nur in der installierten App möglich, nicht beim Start aus dem Quellcode.

Fehlerbehebung #

• macOS blockiert die App oder meldet sie als beschädigt: Klicken Sie unter Systemeinstellungen → Datenschutz & Sicherheit auf Trotzdem öffnen oder führen Sie xattr -cr "/Applications/Eclipse Code.app" im Terminal aus.
• Windows SmartScreen blockiert das Installationsprogramm: Klicken Sie auf Weitere Informationen, dann auf Trotzdem ausführen.
• Der Debugger meldet, Node.js wurde nicht gefunden: Installieren Sie Node.js und starten Sie Eclipse Code neu.
• Die Framework-Vorschau bleibt leer: Öffnen Sie das Terminal namens Dev-Server (die Terminal-Schaltfläche in der Vorschauleiste) und suchen Sie nach Fehlern; stellen Sie sicher, dass npm install ausgeführt wurde.
• Akzente sehen in einer Datei falsch aus: Klicken Sie in der Statusleiste auf die Codierung und wählen Sie Mit Codierung erneut öffnen.
• Die Suche findet nichts in node_modules: Diese Ordner werden absichtlich übersprungen.

Um alles zurückzusetzen, beenden Sie die App und löschen Sie ihren Datenordner: ~/Library/Application Support/Eclipse Code unter macOS oder %APPDATA%\Eclipse Code unter Windows.