Bewertung: Die 6 besten JavaScript-IDEs

JavaScript wird heute für viele verschiedene Arten von Anwendungen verwendet. In den meisten Fällen arbeitet JavaScript mit HTML5 und CSS, um Web-Frontends zu erstellen. JavaScript hilft aber auch beim Erstellen mobiler Anwendungen und hat mit Node.js-Servern einen wichtigen Platz im Back-End gefunden. Glücklicherweise steigen die JavaScript-Entwicklungstools - sowohl Editoren als auch IDEs -, um den neuen Herausforderungen gerecht zu werden.

Warum eine IDE anstelle eines Editors verwenden? Der Hauptgrund ist, dass eine IDE Ihren Code debuggen und manchmal profilieren kann. IDEs unterstützen auch ALM-Systeme, die zur Versionskontrolle in Git, GitHub, Mercurial, Subversion und Perforce integriert sind. Da jedoch immer mehr Editoren diesen Systemen Hooks hinzufügen, wird die ALM-Unterstützung immer weniger zu einem Unterscheidungsmerkmal.

Eclipse 2018 mit JavaScript-Entwicklungstools

In den alten Tagen, als Java Swing neu und aufregend war, habe ich Eclipse gerne für die Java-Entwicklung verwendet, bin aber bald zu anderen Java-IDEs übergegangen. Vor mehr als fünf Jahren, als ich mit Eclipse eine Android-Entwicklung durchführte, fand ich die Erfahrung in Ordnung, aber poky. Als ich 2014 versuchte, Eclipse Luna mit JSDT für die JavaScript-Entwicklung zu verwenden, wurden ständig falsch positive Fehler für gültigen Code angezeigt, der JSHint bestanden hat.

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.

Glücklicherweise haben sich seitdem mehrere Anbieter und Open-Source-Projekte an die Spitze gesetzt. Eclipse 2018 mit JavaScript-Entwicklungstools verfügt über einen anständigen JavaScript-Editor und einen Chrome-basierten Debugger, kennt jedoch weder TypeScript, das von Angular verwendet wird, noch ES6- und JSX-Dateien, die von React verwendet werden.

Eclipse hat schon immer einen riesigen Marktplatz an Plugins. Betrachten Sie für TypeScript das kostenlose TypeScript 1.0.0-Plugin. Berücksichtigen Sie für Angular, TypeScript und ES6 die kommerzielle Angular-IDE (von CodeMix, ehemals Webclipse), und versuchen Sie für React-Projekte mit JSX-Dateien die Open-Source-TypeScript-IDE. Wenn Sie mehr als eine hinzufügen, müssen Sie den Streit darüber lösen, welche TypeScript-Dateien bearbeitet werden sollen, aber das ist keine große Sache.

CodeMix-Tools werden als Hinzufügen von Visual Studio Code-Smarts zu Eclipse in Rechnung gestellt. Im Gegensatz zu den meisten Eclipse-Plugins ist Angular IDE von CodeMix nicht kostenlos, bietet jedoch eine kostenlose 45-Tage-Testversion. Angesichts der Tatsache, dass Visual Studio Code kostenlos ist, würde ich dies berücksichtigen, bevor ich für Angular IDE bezahle.

Kostenlos; Angular IDE von CodeMix, 29 USD (persönlich) oder 48 USD (kommerziell) pro Jahr. Plattform: Windows, MacOS und Linux.

ActiveState Komodo IDE

Ich bin ein Benutzer und Fan von Komodo IDE seit seiner Einführung im Jahr 2001. Obwohl neuere Produkte wie Visual Studio Code und WebStorm es in einigen Bereichen übertroffen haben, ist es immer noch ein guter Editor und eine gute IDE.

Komodo IDE bietet erweiterte JavaScript-Bearbeitung, Syntaxhervorhebung, Navigation und Debugging, beinhaltet jedoch keine JavaScript-Codeprüfung. Dafür können Sie JSHint immer in einer Shell ausführen.

Komodo unterstützt Dutzende von Programmier- und Markup-Sprachen. Komodo IDE bietet eine breite Palette an Programmier- und Markup-Sprachunterstützungen, einschließlich Refactoring, Debugging und Profiling, und ist eine sehr gute Wahl für die End-to-End-Entwicklung in Open Source-Sprachen.

Komodo verfügt über ein Code-Refactoring-Modul für alle Sprachen, für die Code-Intelligenz bereitgestellt wird: PHP, Perl, Python, Ruby, Tcl, JavaScript und Node.js. Leider beschränkt der „kleinste gemeinsame Nenner“ dieses Ansatzes die Möglichkeiten, Variablen und Klassenmitglieder umzubenennen und Code in eine Methode zu extrahieren. Dies sind jedoch einige der nützlichsten Fälle.

Komodo IDE bietet sowohl Spaltenbearbeitung als auch Mehrfachauswahl. Dies bietet nahezu Parität mit Sublime Text und TextMate, was Massenbearbeitungen betrifft. Solange wir den Vergleich durchführen, ist Komodo eher eine IDE, während Sublime Text viel schneller ist. Und solange wir über die Leistung sprechen, hat sich die Geschwindigkeit von Komodo im Vergleich zu älteren Versionen beim Zeichnen, Suchen und Überprüfen der Syntax merklich verbessert.

Komodo IDE verfügt über mehrere Funktionen, die den meisten Konkurrenzprodukten fehlen. Einer davon ist der HTTP-Inspektor, der sich hervorragend zum Debuggen von Ajax-Rückrufen eignet. Ein weiteres ist das Rx-Toolkit (Regular Expression oder Regex), mit dem Sie reguläre Ausdrücke für JavaScript, Perl, PHP, Python und Ruby erstellen und testen können.

Die Zusammenarbeit ist ein weiteres Unterscheidungsmerkmal von Komodo IDE. Stellen Sie sich das als Google Text & Tabellen für Code vor. Sie können Sitzungen für Dateigruppen erstellen, Kontakte zu Mitarbeitern als Mitarbeiter hinzufügen und dann gleichzeitig an denselben Dateien arbeiten, wobei die Synchronisierung nahezu in Echtzeit erfolgt.

Zusammenarbeit ist kein Ersatz für die Quellcodeverwaltung, aber eine nützliche Ergänzung. Komodo IDE integriert die Quellcodeverwaltung mithilfe von CVS, Subversion, Perforce, Git, Mercurial und Bazaar. Es werden nur die grundlegenden Versionskontrollvorgänge unterstützt. Erweiterte Vorgänge wie das Verzweigen müssen mit einem separaten Quellcodeverwaltungsclient ausgeführt werden.

Obwohl Komodo keinen eigenen JavaScript-Dokumentformatierer hat, nutzt es für diesen Zweck das beste kostenlose Open Source. Standardmäßig ist JS Beautifier der Standardformatierer für JavaScript-Dateien. Weitere neun Optionen sind über ein Dropdown-Menü verfügbar.

Komodo IDE unterstützt das Debuggen von clientseitigem JavaScript in Chrome und kann Node.js sowohl lokal als auch remote debuggen. Außerdem werden Perl, Python, PHP, Ruby, Tcl und XSLT getestet.

Komodo IDE verfügt über einen DOM-Viewer, mit dem Sie XML- und HTML-Dokumente als zusammenklappbare Bäume anzeigen können. Außerdem können Sie XPath-Suchen durchführen, um den Baum zu filtern.

Die Cod Profiling- und Unit-Testing-Module von Komodo unterstützen kein JavaScript. JavaScript und Node.js werden jedoch beide vom Code Intelligence-Modul von Komodo unterstützt, das das Durchsuchen von Code, die automatische Vervollständigung und Calltips implementiert.

Komodo IDE kann Dateigruppen über FTP, SFTP, FTPS oder SCP veröffentlichen. Komodo kann auch Dateien synchronisieren und potenzielle Veröffentlichungskonflikte erkennen, die dazu führen können, dass Sie die Änderungen anderer Personen überschreiben.

Insgesamt ist Komodo eine gute, aber nicht großartige JavaScript-IDE und ein guter, aber nicht großartiger JavaScript-Editor. Es kann jedoch durchaus Ihren Anforderungen entsprechen, insbesondere wenn Sie auch mit Perl, Python, PHP, Ruby, Tcl oder XSLT arbeiten.

Kosten: 295 USD plus 87 USD pro Jahr für Upgrades und Support. Plattform: Windows (7 oder höher), MacOS (10.9 oder höher), Linux.

Apache NetBeans

NetBeans unterstützt JavaScript, HTML5 und CSS3 in Webprojekten sehr gut und unterstützt das Cordova / PhoneGap-Framework zum Erstellen von JavaScript-basierten mobilen Anwendungen. NetBeans ist nicht die schnellste IDE im Block, aber eine der vollständigeren. Und natürlich stimmt der Preis: NetBeans ist kostenlos unter einer Open Source-Lizenz erhältlich.

Der NetBeans-JavaScript-Editor bietet Syntaxhervorhebung, automatische Vervollständigung und Code-Faltung, so wie Sie es erwarten würden. Die JavaScript-Bearbeitungsfunktionen funktionieren auch für JavaScript-Code, der in PHP-, JSP- und HTML-Dateien eingebettet ist. Die jQuery-Unterstützung ist in den Editor integriert. NetBeans 8.2 bietet neue oder verbesserte Unterstützung für Node.js und Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha und Selen.

Die Codeanalyse wird beim Bearbeiten im Hintergrund ausgeführt und enthält Warnungen und Hinweise. Das Debuggen funktioniert im eingebetteten WebKit-Browser und in Chrome mit installiertem NetBeans Connector. Der Debugger kann DOM-, Zeilen-, Ereignis- und XMLHttpRequest-Haltepunkte festlegen und zeigt Variablen, Überwachungsfunktionen und den Aufrufstapel an. Ein integriertes Browser-Protokollfenster zeigt Browser-Ausnahmen, Fehler und Warnungen an.

NetBeans kann Unit-Tests mit dem JsTestDriver konfigurieren und durchführen, einer JAR-Datei (Java Archive), die Sie kostenlos herunterladen können. Das Debuggen von Komponententests wird automatisch aktiviert, wenn Sie Chrome mit NetBeans Connector als einen der JsTestDriver-Browser angeben, wenn Sie JsTestDriver im Fenster "Dienste" konfigurieren.

Wenn Sie eine Webanwendung in Chrome mit dem NetBeans Connector debuggen und CSS in den Chrome Developer Tools bearbeiten, werden die Änderungen von NetBeans erfasst und in den CSS-Dateien gespeichert. Wenn Ihre CSS-Dateien jedoch aus Less- oder Sass-Stylesheets generiert wurden, müssen Sie das Quellblatt manuell aktualisieren, da die CSS-Dateien lediglich kompilierte Ausgaben sind.

Im eingebetteten WebKit-Browser und in Chrome mit installiertem NetBeans Connector können Sie den NetBeans-Netzwerkmonitor verwenden, um Anforderungsheader, Antworten und Anrufstapel für die REST-Kommunikation anzuzeigen. Bei der WebSocket-Kommunikation werden sowohl Header als auch Textrahmen angezeigt. Insgesamt bietet NetBeans mit Chrome ein etwas besseres Debugging-Erlebnis als in Firefox mit Firebug.

NetBeans integriert die Quellcodeverwaltung in Git, Subversion, Mercurial und CVS. Die Git-Unterstützung wird durch einen grafischen Diff-Viewer und ein Regalsystem innerhalb der IDE erweitert. NetBeans kodiert den Git-Status von Dateien farblich, lässt Sie den Revisionsverlauf für jede Datei anzeigen und zeigt Ihnen Revisions- und Autoreninformationen für jede Zeile versionierter Dateien an. NetBeans hat ähnliche Integrationen mit Subversion, Mercurial und CVS, aber ich habe nur Git getestet.

NetBeans integriert die Problemverfolgung in Jira und Bugzilla. Im NetBeans-Aufgabenfenster können Sie nach Aufgaben suchen, Suchen suchen, Aufgaben aktualisieren und Aufgaben in Ihrem registrierten Aufgaben-Repository auflösen. NetBeans verfügt auch über eine Team-Server-Integration für Sites, die die Kenai-Infrastruktur verwenden.

Soweit ich feststellen kann, fehlt NetBeans jede JavaScript-Profilerstellung, obwohl Java-Anwendungen und EJB-Module profiliert werden können. Und während NetBeans Java und PHP umgestalten kann, kann es JavaScript nicht umgestalten.

Insgesamt ist NetBeans ein guter Konkurrent für die clientseitige JavaScript-, HTML5- und CSS3-Entwicklung, insbesondere wenn Sie auch Java-, PHP- oder C ++ - Entwicklung auf dem Server durchführen. Wenn Sie nicht über das Budget für WebStorm verfügen und Microsoft nicht mögen, werden Sie feststellen, dass NetBeans den Job erledigt, solange Sie es nicht eilig haben.

Kostenlos. Plattform: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

In meinem vollständigen Test von Visual Studio 2017 habe ich das Produkt als Ganzes mit nur wenigen Verweisen auf JavaScript besprochen. Ich werde die Betonung hier umkehren.

Insgesamt eignet sich Visual Studio 2017 sehr gut als JavaScript-IDE, obwohl es eine bessere .NET-IDE ist und nicht so gut wie WebStorm für JavaScript. Es eignet sich zwar auch sehr gut als JavaScript-Editor, ist jedoch ein besserer C # -Editor und nicht so gut oder schnell wie Sublime Text für JavaScript.

Wie Sie im folgenden Screenshot sehen können, leistet Visual Studio 2017 gute Arbeit mit JavaScript-Syntaxfärbung und Code-Faltung. Auch bei der Navigation mit JavaScript-Code funktioniert dies gut: Klicken Sie mit der rechten Maustaste auf eine Funktion oder einen Mitgliedsnamen, und Sie können problemlos zur Definition springen oder alle Referenzen finden. Wenn Sie mit der Definition fertig sind, können Sie den Zurück-Pfeil oben auf der Benutzeroberfläche drücken, um zu Ihrer Position zurückzukehren.

Sie können problemlos Snippets einfügen und Ihre Auswahl mit geeignetem Code umgeben, z. B. HTML- oder URL-Codierung von Zeichenfolgenvariablen. Neben JavaScript, HTML und CSS können Sie Markdown-Dateien bearbeiten und den gerenderten Markdown anzeigen sowie mit TypeScript arbeiten.

Darüber hinaus können Sie natürlich in jeder .NET-Sprache, in C ++ und in Python codieren. Und wie schon lange bei Visual Studio können Sie direkt von der IDE aus mit Datenbanken arbeiten. Visual Studio ist besonders stark bei der Arbeit mit SQL Server-Datenbanken. Sie können Visual Studio anstelle von SQL Server Management Studio für die meisten Datenbankvorgänge verwenden, die Sie als Entwickler ausführen möchten.

Visual Studio 2017 unterstützt das Debuggen in nahezu jedem Browser, den Sie verwenden möchten, einschließlich Browsern auf Mobilgeräten und in Emulatoren. Es hat auch zwei eigene Browser: den einfachen internen Webbrowser, der (Überraschung!) Eine Version von Internet Explorer ist, und den Seiteninspektor, der Ihnen die gerenderte Seite zusammen mit allen Quellen und Stilen anzeigt. Obwohl der Seiteninspektor viele potenziell zeitaufwändige Reverse-Engineering-Aufgaben ausführt, um sich für eine Seite einzurichten, können Sie dort bleiben, ohne Visual Studio, den Browser und die Entwicklertools des Browsers zu jonglieren .

Die Leistung von Visual Studio 2017 ist normalerweise ziemlich gut, wenn Sie genügend Speicher und CPU-Leistung bereitstellen, erfordert jedoch tendenziell erhebliche Ressourcen. Visual Studio 2017 bietet eine hervorragende Leistungsdiagnose für Anwendungen, ist jedoch im Großen und Ganzen nicht allzu nützlich für normalen JavaScript-Code, der normalerweise tief in einem Browser ausgeführt wird. Visual Studio verfügt über ein spezifisches JavaScript-Funktions-Timing, eine Reaktionsfähigkeit der HTML-Benutzeroberfläche und JavaScript-Speicherwerkzeuge. Diese gelten jedoch nur für JavaScript-basierte Universal Windows Platform-Projekte, nicht für Webprojekte, die zufällig JavaScript verwenden.

Visual Studio 2017 umfasst hervorragende Bearbeitung von Node.js-Anwendungen, IntelliSense, Profilerstellung, NPM-Integration, TypeScript-Unterstützung, lokales und remotees Debuggen (Windows, MacOS, Linux) sowie Debuggen in Azure Web Apps und Azure Cloud Services. Es unterstützt auch CSS, HTML, JavaScript, TypeScript, CoffeeScript und Less. Dazu gehört das Ausführen von JSHint während der Eingabe, das Minimieren von JavaScript-Dateien über ein Kontextmenü und das automatische Kompilieren von CoffeeScript-Dateien beim Speichern, wobei eine nebeneinander angezeigte Vorschau des generierten JavaScript angezeigt wird.