9 Beste Online-Code-Editoren für Webanwendungen

Was ist das nächstbeste zum Codieren? Der Code-Editor natürlich!


Code-Editoren sind der zweitwichtigste Grund für Flammenkriege von Programmierern (der erste ist die Code-Formatierung)..

Für einige ist Vim der einzige vernünftige Editor, der jemals erstellt wurde, während für andere alles, was nicht in die Inception-artige, spiralförmige Welt von Emacs passt, nur zum Spott geeignet ist. Wenn Sie schlecht auf der Suche nach Aufmerksamkeit sind, müssen Sie nur zu einer Programmier-Community gehen und einen Thread wie “Warum ich denke, dass X (wählen Sie einen beliebten Code-Editor) saugt / ist das Beste” starten. Nehmen Sie sich ein Bier und entspannen Sie sich.

Argumente, Gegenargumente und Beleidigungen strömen die ganze Nacht über in die Diskussion hinein und aus ihr heraus, und es wird viele Monate dauern, bis sich das Gift im Faden abkühlt.

Die Frage ist: warum?

Sicher, Menschen schaffen es, aus allem eine große Sache zu machen, aber ich denke, Code-Editoren sind besonders, wenn es um Programmierer geht. Ein typischer Programmierer verbringt fast die gesamte Zeit (mehr als 98%, wenn ich wetten würde) mit dem Code-Editor seiner Wahl. Sie kennen sich im Editor aus – seine Stärken, Schwächen, Grenzen, Macken und verborgenen Schätze.

Nichts ist frustrierender, als beim Schreiben von Code mit dem Editor zu kämpfen (denken Sie daran, wie ärgerlich es ist, wenn Sie eine lange und dringende E-Mail auf einer neuen Tastatur abschießen müssen!). Code-Editoren reduzieren die mentale Reibung und ermöglichen es Ihnen, produktiver zu sein. Deshalb sind sie so wichtig und erhalten so viel Aufmerksamkeit.

Also, welches ist der beste Code-Editor??

Ehrlich gesagt, ich werde es nicht einmal wagen, dorthin zu gehen! �� ��

Wenn Sie sich jedoch für Webentwicklung interessieren, gibt es eine Alternative, über die Sie nachdenken sollten – Online-Code-Editoren!

Kurz gesagt, dies sind Editoren, die sich vollständig auf einem Remote-Server befinden und über den Browser zugänglich sind.

Klingt komisch, richtig?

Ich fühlte mich auch so, als ich vor 3-4 Jahren auf sie stieß. Warum zum Teufel sollte jemand alles an einen dummen Browser übergeben wollen??

Kann es sogar mit einem nativ installierten Code-Editor konkurrieren??

In den meisten Fällen und insbesondere bei der Webentwicklung lautet die Antwort “Ja”. Obwohl ich Online-Editoren nicht als mein primäres Medium angesehen habe, verwende ich sie in bestimmten Szenarien immer häufiger.

Bevor wir uns mit den zu verwendenden Code-Editoren befassen, machen wir eine Pause und überlegen, wann Online-Code-Editoren sinnvoll sein können.

Null-Setup

Ich weiß nichts über Sie, aber ich freue mich nicht darauf, meinen Lieblingseditor nach meinen Wünschen auf einem neuen System einzurichten. Plugins, Designs, Schriftarten, Verknüpfungen, Snippets, Einstellungen. . . Es gibt eine endlose Liste von Dingen, die ausgewogen sein müssen, bevor das Ganze nutzbar wird. Es ist leicht, etwas zu übersehen, um sich später zu ärgern, wenn Ihr Workflow unterbrochen wird.

Im Gegensatz dazu hat ein Online-Editor nach Abschluss des ersten Setups nichts mehr zu tun. Offizielle Builds, Updates, nächtliche Builds, unterstützte Plattformen, Systemarchitektur, FTP-Synchronisierung, CI / CD-Pipelines – nichts davon ist wichtig, solange Sie einen Browser haben!

Zusammenarbeit

Meistens müssen Sie mit anderen Entwicklern zusammenarbeiten, wenn Sie Probleme lösen oder etwas debuggen.

Der herkömmliche Code-Editor ist nicht dafür ausgelegt. Es gibt keinen Bereich für die gleichzeitige Bearbeitung, Kommentierung oder Hervorhebung von Code, und es ist schwierig, Unterstützung dafür hinzuzufügen.

Datensicherheit

Nun ist es selbstverständlich, dass kein Projekt heute ohne Versionskontrolle ist, was bedeutet, dass jederzeit eine Kopie des Codes im Repository vorhanden ist. Es gibt jedoch Zeiten, in denen die Versionskontrolle nicht ausreicht:

  • Sie vergessen, neu erstellte Commits zu pushen, und Ihr Laptop entzündet sich.
  • Sie haben andere wichtige Dateien und Datendumps, mit denen Ihr Code interagiert, obwohl diese nicht Teil der Live-Anwendung sind. Was passiert mit ihnen, wenn Ihr Laptop Feuer fängt??

(Okay, es sieht so aus, als wäre ich besessen davon, dass Notizbücher Feuer fangen, aber du verstehst, worum es geht, oder?!)

Disziplin durchsetzen

Dies könnte genauso gut vor dem Gericht für Entwicklerrechte argumentiert werden (falls es so etwas gibt), aber die Wahrheit ist, dass Entwickler ihre Launen selten für das Gemeinwohl opfern.

Zum Beispiel wird ein Hardcore-Sublime-Text-Enthusiast jemals einen der hervorragenden Redakteure von JetBrains voll und ganz annehmen und jede Gelegenheit finden, auf seine speicherhungrige Natur und langsamere Leistung hinzuweisen.

Gleiches gilt für Tabulatoren gegen Leerzeichen (oder sogar Tabulatoren mit zwei Leerzeichen gegen Tabulatoren mit vier Leerzeichen) – Sie sind naiv, wenn Sie der Meinung sind, dass die Programmierer in Ihrem Team keine Hörner sperren.

In solchen Fällen ist ein Online-Editor ein Segen – Sie legen die Einstellungen für Projekte fest (auch wie der Code formatiert werden soll), und er lehnt es einfach ab, Arbeiten anzunehmen, bis alle Standards eingehalten werden. Vielleicht hart für den Einzelnen, aber großartig für das Projekt!

Inzwischen gehen mir die Anwendungsfälle aus. Lassen Sie uns also abwarten, welche Option wir haben, wenn es um Online-Code-Editoren geht, insbesondere für die Webentwicklung.

JSFiddle

Während JSFiddle kann einen vollwertigen Texteditor nicht ersetzen, er erledigt verdammt gute Arbeit mit einmaligen Frontend-Skripten.

Es ist so beliebt, dass Q.&Websites wie StackOverflow unterstützen bereits das Einbetten von JSFiddle-Links direkt in ihre Plattform.

Um die Dinge schnell in Gang zu bringen, bietet JSFiddle zu Beginn einige Boilerplates an. Das heißt, wenn Sie eine Demo von beispielsweise Reagieren, gestartet erhalten möchten, müssen Sie nur auf die entsprechende Schaltfläche klicken und mit dem Schreiben des Codes beginnen. Sobald Sie auf Speichern klicken, wird die „Geige“ gespeichert. Sie erhalten eine permanente URL (Schauen Sie sich diese alberne Geige an, die ich erstellt habe: https://jsfiddle.net/tuqd76c4/, und beachten Sie, dass Sie Ihre Änderungen vornehmen und auf Speichern klicken können, um eine neue zu erstellen Version dieser URL).

Folgendes macht JSFiddle zu einer tragfähigen Plattform für die Front-End-Webentwicklung:

  • Kostenlose Nutzung (keine versteckten Gebühren oder Freemium-Funktionen). JSFiddle unterstützt sich selbst durch Anzeigen (zumindest zum Zeitpunkt des Schreibens), und Sie können eine Adobe-Anzeige unten links im obigen Screenshot sehen.
  • Funktionen für die Code-Zusammenarbeit – ideal zum gemeinsamen Erstellen von Konzepten, Interviews usw..
  • Mehrere Layouts, Schriftgrößen, helle / dunkle Themen usw..
  • Code-Formatierung (Aufräumen), bevorstehende Unterstützung für Linters (CSS und JS) und mehr.

Und jetzt, schluchz, schluchz, für die schlechten Sachen:

  • JSFiddle ist ein reiner Front-End-Editor. Es gibt keine Möglichkeit, Ihre bevorzugte Backend-Sprache zu codieren und auszuführen.
  • Hier gibt es kein Konzept für Dateien und Ordner (oder Uploads). Alles, was Sie haben, ist ein einziges Leerzeichen für Code, egal wie viel davon vorhanden ist.
  • JSFiddle kann nicht zum Hosten von Code auf Ihrem Server verwendet werden. Der Code muss sich auf JSFiddle befinden und ist ständig öffentlich.
  • Es gibt keine Möglichkeit, eine CI / CD-Pipeline zu erstellen, Git usw. Zu verwenden.

Das heißt, JSFiddle hat seinen Sweet Spot und glänzt, wenn Sie Proof-of-Concept austeilen und mit Lichtgeschwindigkeit zusammenarbeiten müssen. Es ist und bleibt eine wichtige Identität unter den Online-Redakteuren.

CodeSandbox

CodeSandbox kann als eine viel mächtigere und vollständigere Version von JSFiddle angesehen werden. CodeSandbox bietet, wie der Name schon sagt, ein umfassendes Code-Editor-Erlebnis und eine Sandbox-Umgebung für die Front-End-Entwicklung.

CodeSandbox ist ein echtes Kraftpaket und ein süßes, süßes Produkt. Mir würde das Papier ausgehen, wenn ich versuchen würde, alle Vorteile aufzulisten, aber hier sind einige Killerfunktionen:

  • Npm-Unterstützung: Ja, Sie können so ziemlich jedes Paket hinzufügen, das auf npm verfügbar ist.
  • Dateien, Ordner, Module: Sie können Ihren Code in mehrere Dateien aufteilen, Bilder zum öffentlichen Ordner hinzufügen / daraus entfernen und Module nach Belieben erstellen / importieren. Der Workflow entspricht dem eines modernen Modulbündlers, sodass Sie (fast) nichts einrichten müssen.
  • Unterstützung für TypeScript, Hot-Reloading, GitHub-Export, statisches Datei-Hosting usw..
  • Es ist darauf aufgebaut Monaco Herausgeber, das gleiche Tier, das den Favoriten antreibt VSCode Editor. Dies bringt leistungsstarke Funktionen wie “Gehe zu”, “Referenzen suchen” und das notwendige Refactoring auf Ihre Fingerspitzen!
  • Snippet-Unterstützung für Emmet
  • Integrierte DevTools, Flusen, Fehlerüberlagerungen, Test-Frameworks (Jest), Tastenkombinationen und mehr.
  • Leistungsstarkes CLI zum direkten Importieren lokaler Projekte in CodeSandbox.

Während die kostenlose Version von CodeSandbox keinen privaten Code unterstützt, können Sie diese Funktion nutzen (und die Größenbeschränkungen insgesamt erhöhen), indem Sie ihnen weiterhelfen Patreon für nur 5 USD pro Monat (zahlen Sie, was Sie wollen, bis zu 50 USD pro Monat).

CodeAnywhere

Ein Problem mit den meisten Code-Editoren in dieser Liste (zumindest bisher) besteht darin, dass sie erwarten, dass Sie den Code jederzeit auf ihren Servern behalten, oder dass Sie den Code regelmäßig über die Befehlszeile synchronisieren müssen.

Nicht so bei CodeAnywhere.

Am stärksten hat CodeAnywhere zwei Funktionen, die für mich auffallen:

  • Vorgefertigte Container-Images für mehr als 72 Programmiersprachen und Frameworks. Dies bedeutet, dass Sie eine neue Entwicklungsumgebung direkt im Editor bereitstellen können! Natürlich wird der Code automatisch auf dem neu erstellten Container gehostet und die Dateien werden direkt von dort bereitgestellt.
  • Verbinde dich mit irgendetwas. Ja, buchstäblich alles. Sie sind nicht verpflichtet, Ihren Code auf den Servern von CodeAnywhere zu speichern. Unabhängig davon, ob sich Ihr Code auf FTP, Dateifreigabeplattformen wie Dropbox, Amazon S3 oder auf hochentwickelten Versionskontrollplattformen wie GitHub befindet, können Sie CodeAnywhere ganz einfach so einrichten, dass es aus dieser Quelle liest und in diese Quelle schreibt, indem Sie den Code-Editor ausschließlich für verwenden. . . Nun, Code-Bearbeitung. ��

Eine weitere Sache, auf die ich hinweisen möchte: Wenn Sie mit Git in Bezug auf die Anzeige von Verlauf und Unterschieden nicht vertraut sind, könnte CodeAnywhere wie ein Seufzer der Erleichterung wirken. Der Editor verwendet sein Diff-System zum Vergleichen von Dateien, mit dem Sie zwei Dateien über zwei beliebige Revisionen hinweg vergleichen können (jedes Mal, wenn Sie eine Datei speichern, wird eine Revision erstellt)..

Bei Revisionen gibt es jedoch einen kleinen Haken: Mit der kostenlosen Version können Sie nur eine Revision beibehalten, während der kleinste bezahlte Plan höchstens 20 Revisionen zulässt. Im Allgemeinen ist dies kein Problem, da Sie selten über die letzte 20. Revision hinausblicken möchten. Da die meisten Programmierer jedoch die Angewohnheit haben, ein paar Mal pro Minute auf Speichern zu klicken, kann dies schmerzhaft werden.

Alles gesagt und getan, CodeAnywhere ist ein solides, angenehmes Angebot für diejenigen, die in die Cloud ziehen und dort bleiben möchten. �� Da seine Fähigkeiten über den Front-End-Code hinausgehen, wird es meiner Meinung nach dringend empfohlen!

StackBlitz

Wenn Sie sich hauptsächlich mit Front-End beschäftigen und sich nicht von der VSCode-Oberfläche entfernen können, StackBlitz wurde nur für Sie erstellt.

Sehen Sie nichts Besonderes? Ich habe es nicht getan, bis ich ein wenig nach unten gescrollt und auf die Winkel-Schaltfläche geklickt habe. Boom!

Ratet mal, das wurde nicht absichtlich so erstellt, dass es wie VSCode aussieht – es basiert auf dem VSCode-Editor! So sehr, dass Sie Erweiterungen installieren, die Ordner durchsuchen und Dateien so organisieren können, wie Sie es von einer normalen VSCode-Instanz erwarten.

Aber warten Sie, es gibt noch mehr!

Möglicherweise haben Sie Folgendes bemerkt oder nicht:

  • Alle auf StackBlitz erstellten Anwendungen werden auch automatisch auf ihren Servern bereitgestellt! Diese Angular-Spielzeug-App, die ich gerade erstellt habe, wird automatisch auf https://angular-yvyi2j.stackblitz.io/ gehostet. Höchstwahrscheinlich funktioniert die URL immer noch (wird jedoch langsam geladen, wie Sie es erwarten würden, wenn sie kostenlos gehostet wird).!
  • Sie können das Projekt teilen und teilen. Während des Teilens erhalten Sie eine genauere Kontrolle darüber, was andere tun können.
  • Sie können eine Verbindung zu einem GitHub-Repository herstellen und den Code direkt von dort abrufen / pushen lassen. Oder Sie können das Projekt einfach als Zip-Datei herunterladen.

Aber warten Sie, es gibt noch mehr!

Ernsthaft! ��

Hier ist die Liste der offiziellen Funktionen von StackBlitz:

  • Native Unterstützung für Firebase (was ich persönlich nicht benutze, aber hey, es ist ein Segen für diejenigen, die nicht in die dunklen Tiefen des Backends eintauchen möchten)
  • Intellisense, Projektsuche
  • Heißes Nachladen während der Eingabe
  • Importieren Sie npm-Pakete
  • Offline bearbeiten, wenn keine Verbindung besteht!

StackBlitz steckt voller (schöner) Überraschungen, wenn es darum geht, die Hürden bei der Webentwicklung und -bereitstellung zu nehmen. Das Einbetten von VSCode in Ihre Website ist kein Traum mehr!

AWS Cloud9

Cloud9 war wohl die erste browserbasierte IDE, die ernsthafte Funktionen bot und die Idee des Mainstreams als Browser als Editor aufnahm. Kein Wunder, dass Amazon es später und heute erworben hat, Wolke 9 ist Teil des AWS-Angebots.

Wenn Sie sogar remote mit der AWS-Plattform verbunden sind (oder daran interessiert sind), endet Ihre Suche nach einem perfekten (okay, nahezu perfekten) Editor in Cloud9. Mal sehen warum:

  • Für die Verwendung von Cloud9 fallen keine zusätzlichen Gebühren an. Sie können Cloud9 mit einer vorhandenen / neuen AWS-Recheninstanz verbinden und zahlen nur für diese Instanz. Es ist auch möglich, über SSH eine Verbindung zu einem Server eines Drittanbieters herzustellen – genau ohne Gebühr! ��
  • Erstklassige Unterstützung für AWS Serverless-Anwendungen (Debugging usw.)
  • Direkter Terminalzugriff auf AWS über den Editor (ehrlich gesagt, ein anständiges Terminal mit Registerkarten im Editor ist das, was ich in VSCode immer noch vermisse).
  • Über 40 unterstützte Programmiersprachen (Go, C ++, Ruby, Node, Python, PHP, Java … treffen Sie Ihre Wahl)

Wünschenswert sind auch die Funktionen für die Zusammenarbeit in Cloud9, mit denen Überprüfungen / Interviews nahtlos durchgeführt werden können.

Ein weiteres Killer-Feature ist die Wiedergabe der an einer Datei vorgenommenen Änderungen im Videostil, wodurch der Überprüfungsprozess zu einer Freude wird:

Mein Rat?

Wenn Sie sich für AWS interessieren, warten Sie nicht und greifen Sie jetzt zu Cloud9. Wenn Sie noch nicht in der Cloud sind, aber überlegt haben, einen Schritt zu tun, sollten Sie AWS nutzen und Cloud9 in Ihren Workflow integrieren. Sie können in beiden Fällen keine bessere Entscheidung treffen!

CodeEnvy

CodeEnvy ist ein leistungsstarker Cloud-Editor, der Docker-Container verwendet, um vorkonfigurierte und isolierte Entwicklungsumgebungen auszuführen. Es basiert auf der Open-Source-Cloud-IDE Eclipse Che und bietet eine Vielzahl von Skalierbarkeits- und DevOps-Optionen.

Zum Zeitpunkt des Schreibens wurde CodeEnvy von RedHat übernommen (das amüsanterweise selbst von Oracle übernommen wurde!)..

Gitpod

Gitpod ist eine erfrischende Version von Cloud-Code-Editoren (oder IDEs, wenn Sie so wollen), die darauf abzielt, Ihren Code immer getestet und auf dem neuesten Stand zu halten. Mit anderen Worten, es ist tief in GitHub integriert und führt jedes Mal, wenn Sie Code hinzufügen, Ihre Test- und CI / CD-Pipelines aus, um sicherzustellen, dass der Code immer zu 100% fehlerfrei ist.

Es lohnt sich herauszufinden, ob Sie die VSCode-Erfahrung lieben und etwas möchten, das alle wichtigen Back-End- / Front-End-Sprachen und Frameworks unterstützt (Django, Rails, Revel, wie Sie es nennen)..

Theia

Wenn Sie ein eingefleischter SOLID-Fan und ein Nit-Picking-Software-Architekt sind, ist der Theia IDE wird Ihre Trennung von Bedenken Knochen kitzeln. Es handelt sich um eine TypeScript-codierte Code-IDE (fünf Punkte für sofortigen Stil!), Die Front-End und Back-End perfekt voneinander trennt. Das Front-End wird in einem Browser ausgeführt, während sich das Back-End überall befinden kann – auf dem lokalen Computer oder in der Cloud!

Aber das ist noch nicht alles – das Front-End kann als Electron-App mit einer voll funktionsfähigen, isolierten Browserumgebung ausgeführt werden. So erhalten Sie das Erscheinungsbild einer nativen Desktop-App, falls Sie danach verlangen.

Codierer

Obwohl ihre Website dies nicht klar sagt, Codierer ist eine VSCode-Umgebung, die auf einem Server gebündelt ist und lokal oder in der Cloud ausgeführt werden kann. Die empfohlene Konfiguration besteht darin, die IDE als Server in der Cloud auszuführen und lokal über den Browser darauf zuzugreifen. Es gibt vorgefertigte Docker-Images für problemlose Setups und einen Unternehmensplan, falls Sie Unterstützung benötigen oder andere Anforderungen haben.

Fazit

Dies deckt mehr oder weniger alle IDEs und Code-Editoren ab, die es zum Zeitpunkt des Schreibens gibt. Ich habe in dieser Liste zwei Arten von Angeboten ausgelassen: diejenigen, die sich ausschließlich auf Interviews konzentrieren und keine vollwertigen Umgebungen haben (außer natürlich unserem geliebten klassischen JSFiddle), und diejenigen, die anscheinend nichts bieten substanziell und hatte kaum mehr als eine schlanke Homepage.

Wenn Sie der Meinung sind, dass etwas es verdient, hier zu sein, lassen Sie es mich wissen und ich bin Ihnen dankbar! ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map