Die beste Alternative zum Programmieren? Der Code-Editor!
Code-Editoren sind ein Hauptgrund für hitzige Diskussionen unter Programmierern, direkt nach der Formatierung des Codes. Für einige ist Vim der einzig wahre Editor, während andere Emacs als das Nonplusultra ansehen. In der Programmier-Community führt die Behauptung, ein bestimmter Editor sei schlecht oder der beste, schnell zu kontroversen Debatten, die oft lange andauern.
Doch warum ist das so?
Sicher, Menschen können aus allem eine große Sache machen, aber Code-Editoren scheinen bei Programmierern eine besondere Rolle zu spielen. Ein typischer Programmierer verbringt einen Großteil seiner Zeit (wahrscheinlich über 98 %) in dem von ihm gewählten Code-Editor. Sie kennen ihn in- und auswendig: seine Stärken, Schwächen, Grenzen, Eigenheiten und verborgenen Funktionen.
Nichts ist frustrierender, als beim Programmieren mit dem Editor zu kämpfen. Code-Editoren reduzieren diese mentale Reibung und steigern die Produktivität. Deshalb sind sie so wichtig und erhalten so viel Aufmerksamkeit.
Die Frage ist also: Welcher Code-Editor ist der beste?
Ehrlich gesagt, ich wage es nicht, diese Frage zu beantworten! 😉
Wenn Sie jedoch im Bereich der Webentwicklung tätig sind, gibt es eine interessante Alternative: Online-Code-Editoren, auch bekannt als Cloud-basierte Editoren.
Ein Code-Editor ist nicht dasselbe wie eine integrierte Entwicklungsumgebung (IDE). Als Entwickler sollten Sie sich mit den Unterschieden auskennen.
Kurz gesagt, Online-Editoren laufen vollständig auf einem Remote-Server und sind über den Browser zugänglich.
Klingt komisch, oder?
Ich war auch skeptisch, als ich vor einigen Jahren das erste Mal davon hörte. Warum sollte man alles einem Browser anvertrauen?
Kann ein Online-Editor überhaupt mit einem nativ installierten Editor mithalten?
In den meisten Fällen, besonders in der Webentwicklung, lautet die Antwort: Ja. Obwohl ich Online-Editoren nicht primär nutze, greife ich in bestimmten Situationen immer häufiger auf sie zurück.
Bevor wir uns mit den verfügbaren Online-Editoren befassen, sollten wir überlegen, wann sie nützlich sein können.
Kein Setup erforderlich
Ich weiß nicht, wie es Ihnen geht, aber ich habe keine Freude daran, meinen bevorzugten Editor auf einem neuen System einzurichten. Plugins, Themes, Schriftarten, Shortcuts, Snippets, Einstellungen… Die Liste ist endlos. Es ist leicht, etwas zu vergessen und sich später zu ärgern, wenn der Arbeitsablauf dadurch gestört wird.
Bei einem Online-Editor gibt es nach der anfänglichen Einrichtung nichts mehr zu tun. Offizielle Builds, Updates, Nightly Builds, unterstützte Plattformen, Systemarchitektur, FTP-Synchronisierung, CI/CD-Pipelines – nichts davon spielt eine Rolle, solange Sie einen Browser haben!
Zusammenarbeit
Meistens muss man mit anderen Entwicklern zusammenarbeiten, um Probleme zu lösen oder Fehler zu finden.
Herkömmliche Code-Editoren sind dafür nicht ideal. Gleichzeitiges Bearbeiten, Kommentieren oder Hervorheben von Code ist schwierig oder gar nicht möglich.
Datensicherheit
Heutzutage ist Versionskontrolle für jedes Projekt selbstverständlich. Eine Kopie des Codes liegt immer im Repository. Es gibt jedoch Situationen, in denen die Versionskontrolle allein nicht ausreicht:
- Sie vergessen, neu erstellte Commits zu pushen, und Ihr Laptop geht in Flammen auf.
- Sie haben wichtige Dateien oder Daten-Dumps, die Ihr Code verwendet, aber nicht Teil der Live-Anwendung sind. Was passiert mit denen, wenn Ihr Laptop Feuer fängt?
(Okay, ich scheine besessen davon zu sein, dass Laptops Feuer fangen, aber Sie verstehen, worauf ich hinaus will, oder?!)
Durchsetzung von Regeln
Man könnte argumentieren, dass dies die Rechte der Entwickler einschränkt, aber Entwickler sind selten bereit, ihre Vorlieben für das Gemeinwohl zu opfern.
Ein überzeugter Sublime Text-Nutzer wird beispielsweise immer die Vorzüge seines Editors hervorheben und auf die Schwächen von JetBrains-Editoren hinweisen.
Gleiches gilt für die Verwendung von Tabulatoren oder Leerzeichen – es ist naiv zu glauben, dass es hier keine Konflikte geben wird.
In solchen Fällen ist ein Online-Editor ein Segen: Sie legen die Einstellungen für Projekte fest, inklusive der Code-Formatierung. Der Editor akzeptiert dann keine Arbeit, die diesen Standards nicht entspricht. Das mag für Einzelpersonen hart sein, ist aber gut für das Projekt!
Mir gehen die Anwendungsfälle langsam aus, also lassen Sie uns zu den Online-Code-Editoren übergehen, die für die Webentwicklung relevant sind.
JSFiddle
JSFiddle ist zwar kein vollwertiger Texteditor, eignet sich aber hervorragend für einmalige Frontend-Skripte.
Es ist so beliebt, dass Plattformen wie StackOverflow die Einbettung von JSFiddle-Links unterstützen.
Um den Einstieg zu erleichtern, bietet JSFiddle verschiedene Boilerplates an. Wenn Sie beispielsweise eine React-Demo starten möchten, klicken Sie einfach auf die entsprechende Schaltfläche und beginnen mit dem Programmieren. Nach dem Speichern wird die „Fiddle“ gespeichert und Sie erhalten eine permanente URL (z. B. diese Fiddle). Sie können Änderungen vornehmen und auf Speichern klicken, um eine neue Version zu erstellen.
JSFiddle ist eine praktikable Plattform für die Frontend-Webentwicklung aus folgenden Gründen:
- Kostenlos nutzbar (keine versteckten Gebühren oder Freemium-Funktionen). JSFiddle finanziert sich durch Werbung.
- Zusammenarbeit: Ideal für gemeinsame Konzepterstellung oder Interviews.
- Verschiedene Layouts, Schriftgrößen und Designs.
- Code-Formatierung, zukünftige Unterstützung für Linter (CSS und JS).
Hier sind die Nachteile:
- JSFiddle ist ein reiner Frontend-Editor. Es gibt keine Möglichkeit, Backend-Code zu schreiben oder auszuführen.
- Es gibt keine Dateien oder Ordner. Alles befindet sich in einem einzigen Codebereich.
- JSFiddle kann nicht zum Hosten von Code verwendet werden. Der Code muss auf JSFiddle sein und ist öffentlich zugänglich.
- Es gibt keine Möglichkeit, eine CI/CD-Pipeline zu erstellen oder Git zu verwenden.
JSFiddle glänzt jedoch, wenn es um das Erstellen von Proof-of-Concepts und die Zusammenarbeit in Echtzeit geht. Es ist eine feste Größe unter den Online-Editoren.
CodeSandbox
CodeSandbox ist eine leistungsstärkere und umfassendere Version von JSFiddle. Es bietet eine vollständige Code-Editor-Erfahrung und eine Sandbox-Umgebung für die Frontend-Entwicklung.
CodeSandbox ist ein echtes Kraftpaket. Hier sind einige der herausragenden Funktionen:
- Npm-Unterstützung: Sie können fast jedes Paket installieren, das auf npm verfügbar ist.
- Dateien, Ordner und Module: Sie können Ihren Code in mehrere Dateien aufteilen, Bilder hinzufügen/entfernen und Module importieren.
- Unterstützung für TypeScript, Hot Reloading, GitHub-Export und statisches Datei-Hosting.
- Basiert auf dem Monaco-Editor, der auch VSCode antreibt.
- Snippet-Unterstützung für Emmet.
- Integrierte DevTools, Linting, Fehleranzeige, Testframeworks (Jest), Tastenkombinationen und mehr.
- Leistungsstarke CLI zum direkten Importieren lokaler Projekte in CodeSandbox.
Die kostenlose Version von CodeSandbox unterstützt keinen privaten Code. Diese Funktion können Sie durch eine Unterstützung auf Patreon freischalten.
CodeAnywhere
Die meisten Editoren dieser Liste (bisher) erwarten, dass Sie den Code auf ihren Servern speichern oder regelmäßig über die Befehlszeile synchronisieren. Das ist bei CodeAnywhere anders.
Zwei Funktionen von CodeAnywhere sind besonders hervorzuheben:
- Vorgefertigte Container-Images für über 72 Programmiersprachen und Frameworks. Sie können direkt aus dem Editor heraus eine neue Entwicklungsumgebung bereitstellen.
- Verbindung zu allem: Ihr Code muss nicht auf den Servern von CodeAnywhere gespeichert sein. CodeAnywhere kann mit FTP, File-Sharing-Plattformen wie Dropbox, Amazon S3 oder Versionskontrollsystemen wie GitHub arbeiten.
Wenn Sie sich mit Git nicht so gut auskennen, könnte CodeAnywhere eine Erleichterung sein. Das integrierte Diff-System ermöglicht das Vergleichen von Dateien über zwei beliebige Revisionen hinweg.
Die kostenlose Version erlaubt jedoch nur eine Revision, während der kleinste kostenpflichtige Plan bis zu 20 Revisionen zulässt. Da viele Programmierer dazu neigen, häufig zu speichern, kann das zum Problem werden.
Insgesamt ist CodeAnywhere eine gute Wahl für diejenigen, die in die Cloud wechseln möchten. Da die Fähigkeiten über den Frontend-Code hinausgehen, ist es eine empfehlenswerte Option!
StackBlitz
Wenn Sie sich hauptsächlich für Frontend interessieren und die VSCode-Oberfläche bevorzugen, ist StackBlitz die richtige Wahl für Sie.
Die Oberfläche sieht vertraut aus, nicht wahr?
Das liegt daran, dass StackBlitz auf dem VSCode-Editor basiert. Sie können Erweiterungen installieren, Ordner durchsuchen und Dateien organisieren, wie Sie es von VSCode gewohnt sind.
Und es gibt noch mehr!
- Alle auf StackBlitz erstellten Anwendungen werden automatisch auf deren Servern bereitgestellt. Die von mir erstellte Angular-App ist unter https://angular-yvyi2j.stackblitz.io/ verfügbar.
- Sie können Projekte forken und teilen.
- Sie können sich mit einem GitHub-Repository verbinden.
- Sie können das Projekt als ZIP-Datei herunterladen.
Die offiziellen Funktionen von StackBlitz umfassen:
- Native Unterstützung für Firebase.
- Intellisense, Projektsuche.
- Hot-Reloading.
- Import von npm-Paketen.
- Offline-Bearbeitung.
StackBlitz ist voll von Überraschungen und vereinfacht die Webentwicklung. VSCode direkt im Browser zu nutzen, ist keine Utopie mehr!
AWS Cloud9
Cloud9 war einer der ersten browserbasierten IDEs, die ernsthafte Funktionen boten und die Idee des Browsers als Editor etablierten. Kein Wunder, dass Amazon das Projekt später übernommen hat und Cloud9 heute Teil des AWS-Angebots ist.
Wenn Sie mit der AWS-Plattform vertraut sind, ist Cloud9 die richtige Wahl.
Hier sind die Vorteile:
- Es fallen keine zusätzlichen Gebühren für Cloud9 an. Sie zahlen nur für die AWS-Recheninstanz, die Sie mit Cloud9 verbinden. Es ist auch möglich, sich kostenlos über SSH mit einem Drittanbieter-Server zu verbinden.
- Erstklassiger Support für AWS Serverless-Anwendungen (Debugging usw.).
- Direkter Terminalzugriff auf AWS aus dem Editor.
- Über 40 unterstützte Programmiersprachen.
Die Kollaborationsfunktionen in Cloud9 erleichtern die Durchführung von Reviews und Interviews. Die Videowiedergabe der Änderungen, die an einer Datei vorgenommen wurden, macht den Überprüfungsprozess angenehmer:
Wenn Sie AWS nutzen oder planen, es zu nutzen, ist Cloud9 eine ausgezeichnete Wahl.
Gitpod
Gitpod ist eine interessante Alternative unter den Cloud-Code-Editoren. Es zielt darauf ab, Ihren Code immer auf dem neuesten Stand zu halten. Gitpod ist tief in GitHub integriert und führt bei jeder Codeänderung Ihre Test- und CI/CD-Pipelines aus.
Gitpod ist eine gute Option, wenn Sie VSCode bevorzugen und etwas suchen, das alle gängigen Backend- und Frontend-Sprachen unterstützt.
Theia
Wenn Sie ein Fan von SOLID und Softwarearchitektur sind, wird Theia IDE Sie begeistern. Theia ist eine in TypeScript geschriebene IDE mit einem sauber getrennten Frontend und Backend. Das Frontend läuft im Browser, während sich das Backend überall befinden kann – auf einem lokalen Computer oder in der Cloud.
Das Frontend kann auch als Electron-App ausgeführt werden, was das Look-and-Feel einer nativen Desktop-App bietet.
GitHub Codespaces
GitHub Codespaces bietet leistungsstarke virtuelle Maschinen für die Webentwicklung. Mit Visual Studio Code, einem Editor und einem Ökosystem, wird die Arbeit im Browser einfacher.
Nutzen Sie die neueste Entwicklungsumgebung zusammen mit vorgefertigten Images. Sie können Ihre VMs auf bis zu 64 GB RAM und 32 Kerne skalieren. Beginnen Sie mit dem Codieren mithilfe von standardisierten Umgebungen, Hardware-Spezifikationen, Editoreinstellungen, Erweiterungen und Laufzeit-Anforderungen.
Sie können Abhängigkeiten zwischen Projekten mit Docker Compose und Containern isolieren. Die Änderungen können Sie direkt im Browser in der Vorschau anzeigen und öffentliche oder private Ports mit Ihren Teamkollegen teilen. Sie können auch Einstellungen wie Leerzeichen, Tabulatoren, Helligkeit, Dunkelheit oder andere Designs bearbeiten.
Anfänger können GitHub Codespaces kostenlos mit eingeschränkten Funktionen nutzen. Teams oder Unternehmen können es ab 40 $ pro Benutzer und Jahr nutzen.
JetBrains
Mit JetBrains Space erhalten Sie sofort einsatzbereite und automatisierte Cloud-Entwicklungsumgebungen. Space übernimmt die Verantwortung für den gesamten Entwicklungslebenszyklus, von CI/CD-Pipelines und dem Hosten von Git-Repositories bis hin zu den Veröffentlichungspaketen.
Space ist eine dedizierte virtuelle Maschine mit einem Docker-Container. Sie können Bibliotheken und Tools installieren, die Sie in Ihrem Projekt benötigen. Optimieren Sie das Onboarding, indem Sie Coding-Workspaces teilen und replizieren.
Neue Entwickler können sofort mit dem Codieren beginnen, ohne Zeit mit dem Einrichten eines lokalen Rechners zu verschwenden. JetBrains bietet eine zentrale Plattform für die Verwaltung von Entwicklungsumgebungen. Alles, was Sie tun und jede Ressource, die Sie verwenden, wird an einem Ort nachverfolgt. Je nach Projekt können Sie den gewünschten Typ der virtuellen Maschine auswählen. Space schont Ressourcen, indem der Coding-Workspace in den Ruhezustand versetzt wird.
Nutzen Sie die kostenlose Version, um sich einen ersten Eindruck zu verschaffen.
CodeTasty
CodeTasty ist eine erweiterbare, intelligente und moderne Cloud-IDE. Es hilft Ihnen, saubereren Code in Echtzeit zu schreiben. Nutzen Sie Funktionen wie Code-Vervollständigung und Fehlererkennungstools.
CodeTasty bietet ein ähnliches Gefühl wie die Arbeit mit einem lokalen Computer. Sie können so viele Erweiterungen installieren, wie Sie möchten, um Ihre Produktivität zu steigern. CodeTasty unterstützt über 40 Sprachen und Hunderte von Codezeilen in einer Datei.
Testen Sie CodeTasty kostenlos mit einem Sandbox-Workspace, 2 FTP/SSH-Workspaces, Kollaboration, Terminaloption und 2 Mitarbeitern. Ein kostenpflichtiger Plan ab 4 $/Monat bietet Ihnen die Möglichkeit, Ihren Code vor dem Ausführen zu überprüfen.
Replit
Lernen, schreiben und erstellen Sie Code mit Replit’s kostenlose, browserbasierte und kollaborative IDE. Replit unterstützt über 50 Sprachen. Sie können auf jedem Gerät, Betriebssystem und jeder Plattform programmieren.
Laden Sie Teammitglieder oder Freunde zur Bearbeitung ein. Importieren Sie Ihren Code aus GitHub. Replit ermöglicht Ihnen, Code in verschiedenen Sprachen wie C++, Python, CSS oder HTML zu schreiben und zu bearbeiten.
Darüber hinaus kann der Code sofort veröffentlicht werden. Replit hat eine Community von über drei Millionen Entwicklern und bietet Echtzeit-Zusammenarbeit. Mit Plugins können Sie Anwendungen und Bots erstellen. Das Tool hilft Ihnen auch, Projekte direkt im Browser zu entwickeln.
Erstellen Sie jetzt ein Konto und beginnen Sie mit dem Codieren.
PaizaCloud
Erstellen Sie Webanwendungen in Ihrem Browser mit PaizaCloud IDE. Es ist eine Entwicklungsumgebung für Node.js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress und mehr.
PaizaCloud ermöglicht das nahtlose Schreiben von Code, ohne sich um die Einrichtung der Umgebung kümmern zu müssen. Ihre Umgebung ist innerhalb von drei Sekunden bereit. Die Umgebung ist auf Mac, iPad, OS und Windows-Geräten gleich.
Mit Linux-Shells können Sie Webentwicklungsumgebungen einfacher und flexibler einrichten. Sie können auch Hosting-Dienste nutzen, indem Sie auf den Basisplan upgraden.
Führen Sie Befehle aus, verwalten Sie Dateien und bearbeiten Sie Codes direkt im Browser. PaizaCloud macht das Hinzufügen von Befehlen wie vim, ssh usw. überflüssig. Sie können Server einfach und effizient wie einen Desktop bedienen.
Testen Sie den kostenlosen Plan mit 2 Kernen und 2 GB Speicher. Oder nutzen Sie eine unbegrenzte Serverlaufzeit für 9,80 $/Monat und erhalten Sie zusätzlich 1 GB Speicher.
Zusammenfassung
Diese Liste umfasst die meisten IDEs und Code-Editoren, die aktuell verfügbar sind. Ich habe zwei Arten von Angeboten ausgelassen: reine Interview-Plattformen (außer JSFiddle) und Angebote, die kaum mehr als eine ansprechende Homepage bieten.
Wenn Sie eine einfache Lösung für die Webentwicklung suchen, sollten Sie diese Code-Editoren ausprobieren.