Bewertung: Die 10 besten JavaScript-Editoren

JavaScript-Programmierer haben viele gute Tools zur Auswahl - fast zu viele, um den Überblick zu behalten. In diesem Artikel werden 10 Texteditoren mit guter Unterstützung für die Entwicklung mit JavaScript, HTML5 und CSS sowie für die Dokumentation mit Markdown erläutert. Warum einen Editor für die JavaScript-Programmierung anstelle einer IDE verwenden? Mit einem Wort: Geschwindigkeit.

Der wesentliche Unterschied zwischen Editoren und IDEs besteht darin, dass IDEs Ihren Code debuggen und manchmal profilieren können und IDEs ALM-Systeme (Application Lifecycle Management) unterstützen. Viele der hier diskutierten Editoren unterstützen mindestens ein Versionskontrollsystem, häufig Git, sodass das Kriterium weniger zwischen IDEs und Editoren unterscheidet als früher.

Sublime Text und Visual Studio Code sind unter den JavaScript-Editoren führend - Sublime Text für seine Geschwindigkeit ebenso wie für seine praktischen Bearbeitungsfunktionen und Visual Studio Code für noch bessere Funktionen und eine fast ebenso gute Geschwindigkeit. Brackets belegt den dritten Platz. Während TextMate vor einigen Jahren auf meiner Liste ganz oben stand, haben seine Funktionen mit den neuen Entwicklungen nicht wirklich Schritt gehalten.

Höchstwahrscheinlich finden Sie den JavaScript-Editor Ihrer Wahl in Sublime Text, Visual Studio Code oder Brackets. Einige andere Tools - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs und Vim - können sie jedoch empfehlen. Abhängig von der jeweiligen Aufgabe finden Sie möglicherweise eine davon in der Nähe.

Zugehöriges Video: Was ist JavaScript? Schöpfer Brendan Eich erklärt

Brendan Eich, Entwickler der JavaScript-Programmiersprache, erklärt, wie die Sprache verwendet wird und warum sie aufgrund ihrer Benutzerfreundlichkeit immer noch bei Programmierern beliebt ist.

Lassen Sie uns die Optionen durchgehen und sie am Ende vergleichen.

Erhabener Text

Wenn Sie einen flexiblen, leistungsstarken und erweiterbaren Programmier-Texteditor benötigen, der blitzschnell ist und es Ihnen nichts ausmacht, zum Überprüfen, Debuggen und Bereitstellen von Code zu anderen Fenstern zu wechseln, dann sind Sie bei Sublime Text genau richtig.

Neben der Geschwindigkeit unterstützen die vielen bemerkenswerten Stärken von Sublime Text mehr als 70 Dateitypen, darunter JavaScript, HTML und CSS. Fast sofortige Navigation und sofortige Projektumschaltung; Mehrfachauswahl (eine Reihe von Änderungen gleichzeitig vornehmen), einschließlich Spaltenauswahl (Auswahl eines rechteckigen Bereichs der Datei); mehrere Fenster (verwenden Sie alle Ihre Monitore) und geteilte Fenster (nutzen Sie Ihre Bildschirmfläche); vollständige Anpassung mit einfachen JSON-Dateien; eine Python-basierte Plugin-API; und eine einheitliche, durchsuchbare Befehlspalette.

Für Programmierer, die von anderen Editoren stammen, unterstützt Sublime Text TextMate-Bundles (ohne Befehle) und die Vi / Vim-Emulation. Die inoffizielle Sublime Text-Dokumentation enthält abfällige (und falsche) Bemerkungen zu Emacs-Benutzern ( z. B. moi ), die ich jedoch übersehen werde. Warum gibt es die inoffizielle Sublime Text-Dokumentation überhaupt? Zum einen ist die offizielle Dokumentation nicht vollständig - viel weniger.

Als ich früher „fast sofortige Navigation“ sagte, meinte ich es ernst. Um beispielsweise von der aktuellen Position auf dem Bildschirm zur Definition von getResponseHeaderin ajax.js zu springen, kann ich Command-P auf einem Mac oder Strg-P ​​auf einem PC ajeingeben und dann eine Übergangsansicht in ajax.js öffnen @grhund Enter, um eine Registerkarte mit getResponseHeaderausgewählten zu öffnen . Sublime Text kann mit meiner Eingabe Schritt halten. Es fühlt sich so reaktionsschnell an wie einige der besten alten DOS-Editoren wie Brief und Kedit.

Sobald ich ausgewählt habe  getResponseHeader, kann ich alle Verwendungen der Funktion im Kontext finden, indem ich auf einem Mac Umschalt-Befehl-F oder auf einem PC Umschalt-Strg-F und dann die Eingabetaste eingebe. Auf einer neuen Registerkarte werden die Suchergebnisse mit dem Suchbegriff in jedem fünfzeiligen Snippet angezeigt. Durch Doppelklicken auf Boxed Text wird der vollständige Dateikontext in einer neuen Registerkarte angezeigt.

Wenn Sie in der linken Ordner-Seitenleiste auf einen Dateinamen klicken, wird eine vorübergehende Registerkarte mit dem Inhalt der Datei angezeigt. Durch Klicken auf eine andere Datei wird diese Registerkarte ersetzt. Auch hier kann Sublime Text mit meiner Eingabe und meinem Klicken Schritt halten. In ähnlicher Weise kann ich mich durch die verkleinerte Navigation oben rechts auf der Seite fast sofort innerhalb einer Datei bewegen, ohne dass ein Bildlauf erforderlich ist. Ich wünschte, Microsoft Word wäre so reaktionsschnell.

Mehrfachauswahl und Spaltenauswahl ermöglichen eine schnelle Bearbeitung der nervigen Änderungen, für die früher reguläre Ausdrücke erforderlich waren. Müssen Sie eine Liste von Wörtern in eine JSON-Struktur umwandeln, in der jedes Wort von doppelten Anführungszeichen umgeben ist und jedes zitierte Wort durch ein Komma vom nächsten getrennt ist? Es dauert ungefähr acht Tastenanschläge in Sublime Text, egal wie viele Wörter Sie in der Liste haben.

Auf meiner Windows-Entwicklungsbox verwende ich zwei breite Monitore. Auf meinem MacBook verwende ich das Retina-Display sowie ein Thunderbolt-Display. Wenn ich nicht auf einer Anzeige bearbeite und auf der anderen debugge, möchte ich normalerweise viele verschiedene Quelldateien und verschiedene Ansichten gleichzeitig in Quelldateien anzeigen. Sublime Text unterstützt mehrere Fenster, geteilte Fenster, mehrere Arbeitsbereiche pro Projekt, mehrere Ansichten und mehrere Bereiche mit Ansichten. Es ist ziemlich einfach, alle meine Bildschirmflächen zu nutzen, wenn ich möchte, und zu konsolidieren, wenn ich Platz zum Debuggen und Testen schaffen muss.

Sie können alles an Sublime Text anpassen: das Farbschema, die Textschriftart, die globalen Tastenkombinationen, die Tabulatoren, die dateispezifischen Tastenkombinationen und Snippets und sogar die Syntaxhervorhebungsregeln. Die Einstellungen werden als JSON-Dateien codiert. Sprachspezifische Definitionen sind XML-Einstellungsdateien. Um Sublime Text herum gibt es eine aktive Community, die Sublime Text-Pakete und -Plugins erstellt und verwaltet. Viele Funktionen, von denen ich anfangs dachte, dass sie Sublime Text fehlen - einschließlich JSLint- und JSHint-Schnittstellen, JsFormat-, JsMinify-, PrettyJSON- und Git-Unterstützung - sind mithilfe des Paketinstallationsprogramms über die Community verfügbar.

Einer der Gründe für die großartige Leistung von Sublime Text ist, dass es eng codiert ist. Ein weiterer Grund ist, dass Sublime Text keine IDE ist und nicht den Buchhaltungsaufwand einer IDE benötigt.

Aus Sicht eines Entwicklers ist dies ein schwieriger Kompromiss. Wenn Sie sich in einer engen testgetriebenen Entwicklungsschleife von „Rot, Grün, Refactor“ befinden, hilft Ihnen eine IDE, die zum Bearbeiten, Testen, Refactorieren und Verfolgen von Trackcode eingerichtet ist, am meisten. Wenn Sie dagegen Codeüberprüfungen oder größere Änderungen vornehmen, benötigen Sie den schnellsten und effizientesten Editor, den Sie finden können. Dieser Editor könnte Sublime Text sein.

Kosten: Unbegrenzte kostenlose Testversion; 70 USD pro Benutzer für geschäftliche oder persönliche Lizenzen. Plattformen: Windows, MacOS und Linux.

Visual Studio-Code

Visual Studio Code ist ein kostenloser Lightweight-Editor und eine IDE von Microsoft. Es enthält Komponenten von Visual Studio, gemischt mit der Open-Source-Atom Electron-Shell, und bietet hervorragende Unterstützung für die ASP.Net Core-Entwicklung mit C # und für die Node.js-Entwicklung mit TypeScript und JavaScript. Visual Studio Code verstößt gegen das historische Muster von Microsoft, Visual Studio nur unter Windows zu unterstützen, und läuft auch unter MacOS und Linux. Der folgende Screenshot wurde unter MacOS aufgenommen.

Visual Studio Code bietet dank des TypeScript-Compilers und der Salsa-Engine eine erstaunlich gute JavaScript-Code-Vervollständigung. Visual Studio Code sendet Ihren JavaScript-Code im Hintergrund an den TypeScript-Compiler, um Typen abzuleiten und eine Symboltabelle zu erstellen. Sie können die Ergebnisse in dem Feld am unteren Rand des Bildschirmbilds sehen, in dem die Informationen für die hasOwnProperty Methode angezeigt  werden.

Dieselbe Symboltabelle ermöglicht es IntelliSense, Ihnen großartige Popup-Optionslisten für die Code-Vervollständigung während der Eingabe eines Ausdrucks bereitzustellen. Sie erhalten das automatische Schließen von Klammern, Optionen für die automatische Wortvervollständigung, automatische Methodenlisten nach der Eingabe .und automatische Parameterlisten innerhalb einer Methode. Sie können IntelliSense verbessern, indem Sie Verweise auf d.ts-Dateien aus hinzufügen.  DefinitelyTypedVisual Studio Code bietet dies für Sie an, wenn häufig auftretende Probleme erkannt werden, z. B. die Verwendung von  __dirname, einer in Node.js integrierten Variablen.

Die Git-Unterstützung ist sehr gut und recht einfach zu bedienen. Der Visual Studio Code-Debugger bietet eine hervorragende Debug-Erfahrung für die Node.js-Entwicklung (und die ASP.Net-Entwicklung). Visual Studio Code verfügt über sehr gute Tools für HTML, CSS, Less, Sass und JSON, die auf derselben Technologie basieren, die auch die Internet Explorer F12-Entwicklertools unterstützt. Darüber hinaus verfügt es über eine anpassbare Integration mit externen Task-Läufern wie  gulp und  jake.

Visual Studio Code hat ein robustes Ökosystem von Plugins angezogen, um beispielsweise Angular und React zu unterstützen. Es ist jetzt der Editor, den ich empfehle, wenn ich Tutorials zum Erstellen von Apps mit JavaScript- und TypeScript-Frameworks und -Bibliotheken schreibe.

Kosten: Kostenloses Open Source. Plattform: Windows, MacOS und Linux.

Klammern

Brackets ist ein kostenloser Open-Source-Editor, der ursprünglich von Adobe stammt und bessere Tools für JavaScript, HTML und CSS sowie verwandte Open-Web-Technologien bietet. Brackets selbst sind in JavaScript, HTML und CSS geschrieben, und die Entwickler verwenden Brackets, um Brackets zu erstellen. Zusätzlich zu den integrierten Funktionen verfügt Brackets über einen Erweiterungsmanager. Für viele der von Front-End-Entwicklern verwendeten Sprachen und Tools stehen Erweiterungen zur Verfügung. Klammern sind nicht so schnell wie Sublime Text oder TextMate, aber es ist immer noch ziemlich schnell, außer für Pausen zum Laden oder Aktualisieren von Programminhalten aus dem Web.

Brackets bietet gute Unterstützung für JavaScript, CSS, HTML und Node.js. Es hat auch nette Funktionen wie die Inline-Bearbeitung von CSS im Zusammenhang mit einer HTML-ID (Quick Edit). Darüber hinaus bietet Brackets eine übersichtliche Benutzeroberfläche und eine Live-Vorschau für Webseiten, die Sie bearbeiten. Es ist eine sehr gute Wahl für einen kostenlosen Code-Editor.

Die automatische Vervollständigung von JavaScript in Klammern ist sehr gut. Das automatische Schließen von Klammern, spitzen Klammern und eckigen Klammern sowie automatische Dropdown-Menüs für Schlüsselwörter, Variablen und Methoden, einschließlich jQuery-Methoden, nach der Eingabe $. Klammern können den Node.js-Debugger steuern und Node über einen Menüpunkt neu starten. Es ist einfach, Erweiterungen für zusätzliche Funktionen wie TypeScript- und JSX-Unterstützung, Bower-Integration und Git-Integration hinzuzufügen.

Quick Edit, Quick Docs, Quick Open und Live Preview helfen dabei, die Bearbeitung von Webanwendungen zu optimieren und sich auf das zu konzentrieren, was Sie codieren oder entwerfen. Auf der anderen Seite können einige Brackets-Erweiterungen schwierig zu konfigurieren sein, aber nicht so schwierig wie Emacs-Pakete oder Vim-Plugins.

Kosten: Kostenloses Open Source. Plattformen: Windows, MacOS, Linux. 

Atom

Atom ist ein kostenloser, Open Source, hackbarer Programmiereditor von GitHub für Windows, MacOS und Linux, der in die GitHub-App integriert ist und Tausende von Paketen und Themen zur Verfügung hat. Ich komme mit ein paar Community-Paketen sowie den Kernpaketen und -themen aus.

Kein Wunder, dass die Atom-Quelle aufgrund ihres Ursprungs auf GitHub gehostet wird. Es ist in CoffeeScript geschrieben und in Node.js integriert. Atom ist eine spezielle Variante von Chromium, die eher als Texteditor als als Webbrowser konzipiert ist. Jedes Atom-Fenster ist im Wesentlichen eine lokal gerenderte Webseite. Das Atom-Team entwickelt Atom in Atom.

Die Leistung von Atom ist ziemlich gut, wenn es sich nicht selbst aktualisiert. Es ist sofort einsatzbereit und verfügt über einen Fuzzy-Finder, ein schnelles projektweites Suchen und Ersetzen, mehrere Cursor und Auswahlmöglichkeiten, mehrere Fenster, Schnipsel, Code-Faltung und die Möglichkeit, TextMate-Grammatiken und -Themen zu importieren. Atom kann zwei Befehlszeilenprogramme installieren: Atom zum Starten des Editors über eine Shell und APM zum Verwalten der Atom-Pakete im Sinne von NPM für Node.js. Ich benutze Atom häufig beim Durchsuchen von Repositorys, die ich von GitHub geklont habe, da die GitHub-Anwendung dazu ein Kontextmenüelement enthält.

Kosten: Kostenloses Open Source. Plattformen: Windows, MacOS, Linux.

Komodo Edit

Komodo Edit, ActiveStates kostenlose Version von Komodo IDE mit reduzierter Funktionalität, ist ein ziemlich guter mehrsprachiger Editor. Alles, was ich über Komodo IDE als Editor zu sagen hatte (siehe „Review: Die 6 besten JavaScript-IDEs“), gilt für Komodo Edit.