Wenn Sie ein Web-Entwickler sind, haben Sie sehr wahrscheinlich eine Entwicklungsumgebung lokal auf Ihrem Rechner eingerichtet. Sie haben Ihren bevorzugten Code-Editor installiert, die besten Pakete hinzugefügt, Erweiterungen geladen, und die gesamte IDE funktioniert genau so, wie Sie sie brauchen. Aber was, wenn Sie nicht an Ihrem normalen Rechner sind, wenn Sie auf Reisen sind oder von zu Hause aus ohne Laptop arbeiten?
Dann kann das Wissen, welche Online-Code-Editoren es gibt, wirklich den Tag retten. Und mehr als das, vielleicht sogar in der Hosentasche aufbewahrt werden, um Ihre normale Programmierroutine zu verbessern.
Inhalt
Warum Online-Code-Editoren?
Es gibt mehrere Gründe, den Einsatz von Online-Code-Editoren in Betracht zu ziehen. Die Wahrheit ist jedoch, dass die Verwendung einer Online-IDE (höchstwahrscheinlich) Ihre lokal installierte nicht ersetzen wird. Viele Online-Umgebungen sind zwar erstaunlich zuverlässig und in der Lage, den größten Teil der Arbeit zu bewältigen, die Ihnen auferlegt wurde, aber sie sind einfach nicht so stabil und leistungsfähig wie Desktop-Installationen. Dennoch gibt es mehrere Gründe, die die Verwendung einer solchen Umgebung in Betracht ziehen.
- Sie sind auf Reisen und benötigen überall Zugang zu Ihrem Code.
- Sie möchten Snippets und interaktive Teile des Codes gemeinsam nutzen.
- Your time is limited, and you need a solution with nearly zero setup.
- Ihre Zeit ist begrenzt, und Sie benötigen eine Lösung, die fast keine Einrichtung erfordert.
- Ihr Budget ist begrenzt. Online-Code-Editoren haben möglicherweise mehr Macht hinter sich als die Workstation, zu der Sie Zugang haben.
- Ihr Team muss in Echtzeit zusammenarbeiten. Viele Online-IDEs haben Collaboration-Tools eingebaut, die ohne Einrichtung funktionieren.
Unabhängig davon, warum Sie eine Online-IDE verwenden wollen oder müssen, es gibt eine Vielzahl von Möglichkeiten, aus denen Sie wählen können, jede mit unterschiedlichen Stärken und Schwächen und mit unterschiedlichen Funktionen für Webentwickler.
Die meisten Online-Code-Editoren werden Ihre lokale Entwicklungsumgebung nicht ersetzen. Was sie jedoch tun können, ist, eine solide und einfache Möglichkeit zur Verfügung zu stellen, um Code zu bearbeiten, Snippets auszutauschen, Backups zu erstellen und mit neuen Funktionen an einem sicheren und geschützten Ort in Echtzeit zu experimentieren. Wenn Sie sich noch nie mit der Online-Bearbeitung befasst haben, gibt es keinen besseren Zeitpunkt, um mit vollständigen IDEs wie StackBlitz, Snippet-Sharing-Diensten wie JSBin und sogar nur mit Online-Code-Editoren wie der WordPress ThemeEditor zu starten.
PlayCode
PlayCode ist ein praktischer, universell einsetzbarer Online-Code-Editor. Mit ihm können Sie mehrere Dateien öffnen, die zusammen in einem einzigen Projekt laufen, genau wie bei mehreren Dateien in einer typischen Verzeichnisstruktur mit Sublime Text oder VS-Code. PlayCode verfügt über vorgefertigte Vorlagen für Benutzer sowie über Echtzeit-Ergebnisse und eine integrierte Konsolen-Fehlersuche direkt im Browser. Benutzer können ohne Anmeldung für Schnellkorrekturen und Ähnliches arbeiten und editieren, sich aber auch anmelden, um die Arbeit zu speichern und PlayCode maschinenübergreifend zu verwenden.
JSFiddle
JSFiddle ist ein weiterer Top-Online-Code-Editor, der in vielerlei Hinsicht wie PlayCode funktioniert. JSFiddle wurde speziell für JavaScript-Codierer entwickelt und ist nicht unbedingt für die Arbeit an ganzen Projekten gedacht, aber wie die Informationsleiste oben im Editor selbst sagt, funktioniert er am besten für “Demos für Dokumente, Fehlerberichte für Github-Probleme, die Präsentation von Code-Antworten bei Stack-Überlauf, Live-Code-Zusammenarbeit, Code-Snippet-Hosting” oder einfach als Sandkasten, in dem Sie mit Ihrem Code herumspielen können.
CodePen
CodePen wird wahrscheinlich als der Online-Code-Editor von Online-Code-Editoren angesehen. Er gibt Ihnen nicht nur die Werkzeuge für Zusammenarbeit, Experimente und Austausch, sondern Sie erhalten auch Live-Ergebnisse und die Möglichkeit, die Datenbank und das Repository der Schnipsel zu durchsuchen, die andere Autoren erstellt haben, so dass Sie auch experimentieren und von ihrer Arbeit lernen können. Es ist auch ein unterhaltsamer Ort, um zu sehen, was einige Leute auf neue und unterhaltsame Weise mit dem Code machen. Außerdem werden CodePen-Schnipsel von Google indexiert, und oft landet man hier, wenn man nach einer Lösung sucht, bevor man zum Stack Overflow geht – und manchmal auch danach, denn dort schreiben die Leute oft und teilen Lösungen in Echtzeit.
StackBlitz
StackBlitz ist eine tolle Sache. Es ist beeindruckend, was diese App einem Entwicklern bietet – sie ist vollgepackt mit Werkzeugen, mit denen Sie Ihr Projekt mit einem laufenden Start in Gang bringen können. Mit einem einzigen Klick. Die Dateien und Abhängigkeiten und sogar die gemeinsam benutzbaren URLs wurden mit einer einzigen Schaltfläche Start a New Workspace – React (JavaScript) generiert. Mit der Möglichkeit, über Ihr GitHub-Konto zu speichern, freizugeben und sogar eine Verbindung zu Ihrem GitHub-Konto herzustellen, verdient StackBlitz einen Blick darauf. Anstatt ein Snippet-Sharing-Dienst oder eine Kodierungs-Sandbox zu sein, ist StackBlitz eine solide IDE für diejenigen, die Online-Code-Editoren bevorzugen.
Zudem, und das können wir nicht einfach so stehen lassen, basiert es auf VS-Code. Sie führen also im Grunde die beliebteste IDE und den beliebtesten Code-Editor in Ihrem Browser aus, und jedes Projekt erhält seinen eigenen Serverplatz. Sie können ein Upgrade durchführen, wenn Sie wollen, aber auch die freie Version funktioniert gut. Es lohnt sich, gerade dieses Projekt genau unter die Lupe zu nehmen.
JSBin
JSBin speichert automatisch Ihren Fortschritt bei jedem Code, mit dem Sie arbeiten. Selbst wenn Sie einfach nur experimentieren, um zu sehen, was die Schnipsel bewirken, werden Sie Ihre Arbeit nicht verlieren. JSBin ist ein einfacher, unkomplizierter Editor.
WordPress Theme Editor
WordPress ist vielleicht nicht das erste, woran Sie bei Online-Code-Editoren denken. Aber es ist definitiv etwas, das man in Betracht ziehen sollte. Mit WordPress 4.9 wurde WP Core aktualisiert, um CodeMirror aufzunehmen. Syntax-Highlighting und Fehlerwarnungen für alle Änderungen, die innerhalb von Codebereichen vorgenommen werden, sind jetzt in WordPress Standard. Der primäre Ort dafür ist der Bereich “Erscheinungsbild – Themeneditor”, aber er erscheint auch in jedem Widget-Bereich (wie z.B. dem Custom HTML-Widget) oder innerhalb des Themen-Anpassers auf der Registerkarte Custom CSS. Obwohl es sich hierbei definitiv nicht um eine vollständige IDE handelt, können wir den WP CodeMirror-Editor als eine Möglichkeit zur Überprüfung von Fehlern und zur Aktualisierung von Codeschnipseln absolut empfehlen, ohne sich mit FTP und verschiedenen Dateiverwaltungssystemen befassen zu müssen.
