Review: de 6 beste JavaScript-IDE's

JavaScript wordt tegenwoordig voor veel verschillende soorten toepassingen gebruikt. Meestal werkt JavaScript met HTML5 en CSS om webfrontends te bouwen. Maar JavaScript helpt ook bij het bouwen van mobiele applicaties, en het heeft een belangrijke plaats aan de achterkant gevonden in de vorm van Node.js-servers. Gelukkig zijn JavaScript-ontwikkeltools - zowel editors als IDE's - in opkomst om de nieuwe uitdagingen aan te gaan.

Waarom een ​​IDE gebruiken in plaats van een editor? De belangrijkste reden is dat een IDE uw code kan debuggen en soms profileren. IDE's hebben ook ondersteuning voor ALM-systemen, die kunnen worden geïntegreerd met Git, GitHub, Mercurial, Subversion en Perforce voor versiebeheer. Maar naarmate meer editors hooks aan deze systemen toevoegen, wordt ALM-ondersteuning minder een onderscheidende factor.

Eclipse 2018 met JavaScript-ontwikkeltools

Vroeger, toen Java Swing nieuw en opwindend was, vond ik het leuk om Eclipse te gebruiken voor Java-ontwikkeling, maar al snel stapte ik over naar andere Java IDE's. Meer dan vijf jaar geleden, toen ik wat Android-ontwikkeling deed met Eclipse, vond ik de ervaring OK, maar miezerig. Toen ik in 2014 Eclipse Luna met JSDT probeerde te gebruiken voor JavaScript-ontwikkeling, vertoonde het constant fout-positieve fouten voor geldige code die JSHint passeerde.

Gerelateerde video: Wat is JavaScript? Schepper Brendan Eich legt uit

Brendan Eich, de maker van de programmeertaal JavaScript, legt uit hoe de taal wordt gebruikt en waarom het nog steeds favoriet is bij programmeurs vanwege het gebruiksgemak.

Gelukkig zijn sindsdien verschillende leveranciers en open source-projecten op de plaat verschenen. Eclipse 2018 met JavaScript Development Tools heeft een fatsoenlijke JavaScript-editor en een op Chrome gebaseerde debugger, maar weet niets over TypeScript, dat wordt gebruikt door Angular, of over ES6- en JSX-bestanden, die worden gebruikt door React.

Eclipse heeft altijd genoten van een enorme markt met plug-ins. Overweeg voor TypeScript de gratis TypeScript 1.0.0-plug-in. Overweeg voor Angular, TypeScript en ES6 de commerciële Angular IDE (van CodeMix, voorheen Webclipse), en voor React-projecten met JSX-bestanden, probeer de open source TypeScript IDE. Als u er meer dan één toevoegt, moet u hun geschil oplossen over welke TypeScript-bestanden moeten worden bewerkt, maar dat is geen probleem.

CodeMix-tools worden gefactureerd als het toevoegen van Visual Studio Code-smarts aan Eclipse. In tegenstelling tot de meeste Eclipse-plug-ins is Angular IDE van CodeMix niet gratis, maar het heeft wel een gratis proefperiode van 45 dagen. Aangezien Visual Studio Code gratis is, zou ik dat overwegen voordat ik betaal voor Angular IDE.

Gratis; Angular IDE door CodeMix, $ 29 (persoonlijk) of $ 48 (commercieel) per jaar. Platform: Windows, MacOS en Linux.

ActiveState Komodo IDE

Ik ben een gebruiker en fan van Komodo IDE sinds het voor het eerst werd geïntroduceerd in 2001. Hoewel nieuwere producten zoals Visual Studio Code en WebStorm het op sommige gebieden hebben overtroffen, is het nog steeds een goede editor en IDE.

Komodo IDE biedt geavanceerde JavaScript-bewerking, syntaxisaccentuering, navigatie en foutopsporing, maar het bevat geen JavaScript-codecontrole. Daarvoor kunt u JSHint altijd in een shell uitvoeren.

Komodo ondersteunt tientallen programmeer- en opmaaktalen. Met zijn brede scala aan programmeer- en opmaaktaalondersteuning, inclusief refactoring, debugging en profilering, is Komodo IDE een zeer goede keuze voor end-to-end ontwikkeling in open source-talen.

Komodo heeft een code-refactoring-module voor alle talen waarvoor het code-intelligentie biedt: PHP, Perl, Python, Ruby, Tcl, JavaScript en Node.js. Helaas beperkt de "kleinste gemene deler" aard van deze benadering de mogelijkheden tot het hernoemen van variabelen en klasseleden, en tot het extraheren van code in een methode. Dit zijn echter enkele van de meest bruikbare gevallen.

Komodo IDE heeft zowel kolombewerking als meerdere selecties. Dit biedt bijna gelijkheid met Sublime Text en TextMate wat betreft massa-bewerkingen. Zolang we de vergelijking maken, is Komodo meer een IDE, terwijl Sublime Text veel sneller is. En zolang we het over prestaties hebben, is de snelheid van Komodo merkbaar verbeterd in vergelijking met oudere versies, wat betreft schermtekening, zoeken en syntaxiscontrole.

Komodo IDE heeft verschillende functies die de meeste concurrerende producten missen. Een daarvan is de HTTP Inspector, die uitstekend geschikt is voor het debuggen van Ajax-callbacks. Een andere is de Rx-toolkit (reguliere expressie of regex), die een geweldige manier is om reguliere expressies voor JavaScript, Perl, PHP, Python en Ruby te bouwen en te testen.

Samenwerking is een andere Komodo IDE-onderscheidende factor - beschouw het als Google Docs voor code. U kunt sessies maken voor groepen bestanden, contacten aan sessies toevoegen als bijdragers en vervolgens tegelijkertijd aan dezelfde bestanden werken, met bijna realtime synchronisatie.

Samenwerking is geen vervanging voor broncodebeheer, maar het is een nuttige aanvulling. Komodo IDE integreert broncodecontrole met behulp van CVS, Subversion, Perforce, Git, Mercurial en Bazaar. Alleen de basisbewerkingen voor versiebeheer worden ondersteund. Geavanceerde bewerkingen, zoals vertakking, moeten worden uitgevoerd met behulp van een afzonderlijke broncodecontroleclient.

Hoewel Komodo geen eigen JavaScript-documentformatter heeft, maakt het voor dit doel gebruik van de beste gratis open source. Uit de doos is de standaardformatter voor JavaScript-bestanden JS Beautifier, maar er zijn nog negen opties beschikbaar via een vervolgkeuzemenu.

Komodo IDE ondersteunt foutopsporing client-side JavaScript in Chrome, en het kan Node.js zowel lokaal als op afstand debuggen. Het debugt ook Perl, Python, PHP, Ruby, Tcl en XSLT.

Komodo IDE heeft een DOM-viewer waarmee u XML- en HTML-documenten als inklapbare bomen kunt bekijken. Het laat je ook XPath-zoekopdrachten uitvoeren om de boom te filteren.

De modules voor codeprofilering en eenheidstesten van Komodo ondersteunen geen JavaScript. JavaScript en Node.js worden echter beide ondersteund door Komodo's Code Intelligence-module, die codebrowsen, automatisch aanvullen en calltips implementeert.

Komodo IDE kan groepen bestanden publiceren via FTP, SFTP, FTPS of SCP. Komodo kan ook bestanden synchroniseren en potentiële publicatieconflicten detecteren die ertoe kunnen leiden dat u de wijzigingen van anderen overschrijft.

Over het algemeen is Komodo een goede maar niet geweldige JavaScript-IDE en een goede maar niet geweldige JavaScript-editor. Het kan echter goed aan uw behoeften voldoen, vooral als u ook werkt met Perl, Python, PHP, Ruby, Tcl of XSLT.

Kosten: $ 295, plus $ 87 per jaar voor upgrades en ondersteuning. Platform: Windows (7 of hoger), MacOS (10.9 of hoger), Linux.

Apache NetBeans

NetBeans heeft zeer goede ondersteuning voor JavaScript, HTML5 en CSS3 in webprojecten, en het ondersteunt het Cordova / PhoneGap-framework voor het bouwen van op JavaScript gebaseerde mobiele applicaties. NetBeans is niet de snelste IDE in de buurt, maar het is een van de meest complete. En de prijs is natuurlijk goed: NetBeans is gratis beschikbaar onder een open source-licentie.

De NetBeans JavaScript-editor biedt syntaxisaccentuering, automatische aanvulling en code-invouwing, vrijwel zoals je zou verwachten. De JavaScript-bewerkingsfuncties werken ook voor JavaScript-code die is ingesloten in PHP-, JSP- en HTML-bestanden. jQuery-ondersteuning is ingebakken in de editor. NetBeans 8.2 heeft nieuwe of verbeterde ondersteuning voor Node.js en Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha en Selenium.

Code-analyse wordt tijdens het bewerken op de achtergrond uitgevoerd en geeft waarschuwingen en hints. Foutopsporing werkt in de ingebouwde WebKit-browser en in Chrome met de NetBeans-connector geïnstalleerd. De debugger kan DOM-, line-, event- en XMLHttpRequest-breekpunten instellen en het zal variabelen, horloges en de call-stack weergeven. Een geïntegreerd browservenster geeft browseruitzonderingen, fouten en waarschuwingen weer.

NetBeans kan unit-testen configureren en uitvoeren met de JsTestDriver, een JAR-bestand (Java-archief) dat u gratis kunt downloaden. Foutopsporing van eenheidstests wordt automatisch ingeschakeld als u Chrome met NetBeans Connector specificeert als een van de JsTestDriver-browsers wanneer u JsTestDriver configureert in het venster Services.

Wanneer u een webtoepassing in Chrome debugt met de NetBeans Connector en CSS bewerkt vanuit de Chrome Developer Tools, worden de wijzigingen vastgelegd door NetBeans en opgeslagen in de CSS-bestanden. Als uw CSS-bestanden echter zijn gegenereerd op basis van Less- of Sass-stijlbladen, moet u het bronblad handmatig bijwerken omdat de CSS-bestanden slechts gecompileerde uitvoer zijn.

In de ingebouwde WebKit-browser en in Chrome met de NetBeans-connector geïnstalleerd, kunt u de NetBeans-netwerkmonitor gebruiken om verzoekkoppen, antwoorden en oproepstapels voor REST-communicatie te bekijken. Voor WebSocket-communicatie worden zowel kopteksten als tekstkaders weergegeven. Over het algemeen biedt NetBeans een iets betere foutopsporingservaring met Chrome dan in Firefox met Firebug.

NetBeans integreert broncodecontrole met Git, Subversion, Mercurial en CVS. De Git-ondersteuning wordt aangevuld met een grafische Diff-viewer en met een rekkensysteem binnen de IDE. NetBeans geeft kleurcodes aan de Git-status van bestanden, laat je de revisiegeschiedenis van elk bestand zien, en toont je revisie- en auteurinformatie voor elke regel met versie-gecontroleerde bestanden. NetBeans heeft vergelijkbare integraties met Subversion, Mercurial en CVS, maar ik heb alleen Git getest.

NetBeans integreert probleemopsporing met Jira en Bugzilla. In het NetBeans-taakvenster kunt u naar taken zoeken, zoekopdrachten opslaan, taken bijwerken en taken oplossen in uw geregistreerde taakrepository. NetBeans heeft ook teamserverintegratie voor sites die de Kenai-infrastructuur gebruiken.

Voor zover ik kan nagaan, mist NetBeans JavaScript-profilering, hoewel het Java-applicaties en EJB-modules kan profileren. En hoewel NetBeans Java en PHP kan refactoren, kan het JavaScript niet refactoren.

Over het algemeen is NetBeans een goede kanshebber voor client-side JavaScript-, HTML5- en CSS3-ontwikkeling, vooral als u ook Java, PHP of C ++ ontwikkelt op de server. Als je geen budget hebt voor WebStorm en een hekel hebt aan Microsoft, zul je merken dat NetBeans het werk doet, zolang je maar geen grote haast hebt.

Gratis. Platform: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

In mijn volledige recensie van Visual Studio 2017 heb ik het product als geheel besproken, met slechts een paar verwijzingen naar JavaScript. Ik zal de nadruk hier omkeren.

Over het algemeen dient Visual Studio 2017 erg goed als een JavaScript-IDE, hoewel het een betere .Net IDE is, en het is niet zo goed als WebStorm voor JavaScript. Hoewel het ook erg goed dient als JavaScript-editor, is het een betere C # -editor en niet zo goed of zo snel als Sublime Text voor JavaScript.

Zoals je in de onderstaande schermafbeelding kunt zien, doet Visual Studio 2017 het goed met JavaScript-syntaxiskleuring en codevouw. Het doet het ook goed met JavaScript-codenavigatie: klik met de rechtermuisknop op een functie of lidnaam en u kunt gemakkelijk naar de definitie springen of alle verwijzingen vinden. Als je klaar bent met het bekijken van de definitie, kun je op de pijl-terug bovenaan de interface drukken om terug te gaan naar waar je was.

U kunt gemakkelijk fragmenten invoegen en uw selectie omringen met de juiste code, zoals HTML- of URL-codering van stringvariabelen. Naast JavaScript, HTML en CSS kunt u Markdown-bestanden bewerken en de gerenderde Markdown bekijken en kunt u met TypeScript werken.

Bovendien kun je natuurlijk coderen in elke .Net-taal, in C ++ en in Python. En zoals al lang het geval is bij Visual Studio, kun je direct vanuit de IDE met databases werken. Visual Studio is vooral sterk bij het werken met SQL Server-databases. U kunt wegkomen door Visual Studio te gebruiken in plaats van SQL Server Management Studio voor de meeste databasebewerkingen die u als ontwikkelaar wilt uitvoeren.

Visual Studio 2017 ondersteunt foutopsporing in vrijwel elke browser die u erin wilt gooien, inclusief browsers op mobiele apparaten en in emulators. Het heeft ook twee eigen browsers: de gewone interne webbrowser, die (verrassing!) Een versie van Internet Explorer is, en de Page Inspector, die je de weergegeven pagina laat zien samen met alle bronnen en stijlen. Hoewel de Page Inspector veel mogelijk tijdrovende, reverse-engineering-dingen doet om zichzelf voor een pagina in te stellen, kunt u daar blijven zonder te jongleren met Visual Studio, de browser en de ontwikkelaarstools van de browser. .

De prestaties van Visual Studio 2017 zijn meestal redelijk goed als je het voldoende geheugen en CPU-kracht geeft, maar het vereist meestal aanzienlijke bronnen. Visual Studio 2017 heeft geweldige prestatiediagnoses voor applicaties, maar over het algemeen zijn ze niet zo handig voor gewone JavaScript-code, die meestal diep in een browser wordt uitgevoerd. Visual Studio heeft specifieke JavaScript-functietiming, HTML UI-reactievermogen en JavaScript-geheugentools, maar ze zijn alleen van toepassing op JavaScript-gebaseerde Universal Windows Platform-projecten, niet op webprojecten die toevallig JavaScript gebruiken.

Visual Studio 2017 omvat uitstekende Node.js-applicatiebewerking, IntelliSense, profilering, NPM-integratie, TypeScript-ondersteuning, foutopsporing lokaal en op afstand (Windows, MacOS, Linux) en foutopsporing op Azure Web Apps en Azure Cloud Services. Het heeft ook ondersteuning voor CSS, HTML, JavaScript, TypeScript, CoffeeScript en Less. Dit omvat het uitvoeren van JSHint terwijl u typt, zodat u JavaScript-bestanden kunt verkleinen vanuit een contextmenu, en automatisch CoffeeScript-bestanden compileren bij het opslaan, waarbij een zij-aan-zij voorbeeld van het gegenereerde JavaScript wordt weergegeven.