Granskning: De 6 bästa JavaScript IDE: erna

JavaScript används för många olika typer av applikationer idag. Oftast fungerar JavaScript med HTML5 och CSS för att bygga webbgränssnitt. Men JavaScript hjälper också till att bygga mobila applikationer, och det har funnit en viktig plats på baksidan i form av Node.js-servrar. Lyckligtvis utvecklar JavaScript-utvecklingsverktyg - både redaktörer och IDE: er för att möta de nya utmaningarna.

Varför använda en IDE istället för en redaktör? Den främsta anledningen är att en IDE kan felsöka och ibland profilera din kod. IDE har också stöd för ALM-system som integreras med Git, GitHub, Mercurial, Subversion och Perforce för versionskontroll. Men när fler redaktörer lägger till krokar i dessa system blir ALM-stöd en mindre skillnad.

Förmörkelse 2018 med JavaScript-utvecklingsverktyg

Tillbaka i forntiden när Java Swing var nytt och spännande, tyckte jag om att använda Eclipse för Java-utveckling, men jag gick snart vidare till andra Java IDE. För fem år sedan, när jag gjorde Android-utveckling med Eclipse, tyckte jag att upplevelsen var OK, men snäll. När jag försökte använda Eclipse Luna med JSDT för JavaScript-utveckling 2014 visade det ständigt falskt positiva fel för giltig kod som passerade JSHint.

Relaterad video: Vad är JavaScript? Skaparen Brendan Eich förklarar

Brendan Eich, skaparen av JavaScript-programmeringsspråket, förklarar hur språket används och varför det fortfarande är en favorit bland programmerare för dess användarvänlighet.

Lyckligtvis har flera leverantörer och öppen källkodsprojekt klättrat uppåt sedan dess. Eclipse 2018 med JavaScript-utvecklingsverktyg har en anständig JavaScript-redigerare och en Chrome-baserad felsökare, men den vet inte om TypeScript, som används av Angular, eller om ES6- och JSX-filer, som används av React.

Eclipse har alltid haft en enorm marknadsplats för plugins. För TypeScript, överväga det gratis TypeScript 1.0.0-tillägget. För Angular, TypeScript och ES6, överväga den kommersiella Angular IDE (av CodeMix, tidigare Webclipse), och för React-projekt med JSX-filer kan du prova TypeScript IDE med öppen källkod. Om du lägger till mer än en måste du lösa deras tvist om vilken som ska redigera TypeScript-filer, men det är inte en stor sak.

CodeMix-verktyg faktureras som att lägga till Visual Studio Code-smarts till Eclipse. Till skillnad från de flesta Eclipse-plugins är Angular IDE från CodeMix inte gratis, men det har en 45-dagars gratis testperiod. Med tanke på att Visual Studio-koden är gratis skulle jag överväga att innan jag betalar för Angular IDE.

Kostnad: Gratis; Vinkel IDE av CodeMix, $ 29 (personligt) eller $ 48 (kommersiellt) per år. Plattform: Windows, MacOS och Linux.

ActiveState Komodo IDE

Jag har varit en användare och fan av Komodo IDE sedan den först introducerades 2001. Även om nyare produkter som Visual Studio Code och WebStorm har överträffat det på vissa områden är det fortfarande en bra redaktör och IDE.

Komodo IDE tillhandahåller avancerad JavaScript-redigering, syntaxmarkering, navigering och felsökning, men den inkluderar inte JavaScript-kodkontroll. För det kan du alltid köra JSHint i ett skal.

Komodo stöder dussintals språk för programmering och markering. Med sitt brett utbud av programmerings- och markup-språkstöd, inklusive refactoring, felsökning och profilering, är Komodo IDE ett mycket bra val för end-to-end-utveckling på språk med öppen källkod.

Komodo har en kodreformeringsmodul för alla språk som den tillhandahåller kodintelligens för: PHP, Perl, Python, Ruby, Tcl, JavaScript och Node.js. Tyvärr begränsar den "minst gemensamma nämnaren" till detta tillvägagångssätt till att byta namn på variabler och klassmedlemmar och att extrahera kod till en metod. Ändå är dessa några av de mest användbara fallen.

Komodo IDE har både kolumnredigering och flera val. Detta ger nästan paritet med Sublime Text och TextMate vad gäller massredigeringar. Så länge vi gör jämförelsen är Komodo mer en IDE, medan Sublime Text är mycket snabbare. Och så länge vi diskuterar prestanda har Komodos hastighet förbättrats märkbart jämfört med äldre versioner, när det gäller skärmritning, sökning och syntaxkontroll.

Komodo IDE har flera funktioner som de flesta konkurrerande produkter saknar. En är HTTP-inspektören, som är utmärkt för felsökning av Ajax-återuppringningar. En annan är dess Rx-verktygssats (reguljära uttryck eller regex), vilket är ett utmärkt sätt att bygga och testa reguljära uttryck för JavaScript, Perl, PHP, Python och Ruby.

Samarbete är en annan Komodo IDE-differentierare - tänk på det som Google Docs för kod. Du kan skapa sessioner för grupper av filer, lägga till kontakter i sessioner som medarbetare och sedan arbeta tillsammans på samma filer samtidigt med synkronisering i realtid.

Samarbete är inte en ersättning för källkodskontroll, men det är ett användbart tillägg. Komodo IDE integrerar källkodskontroll med CVS, Subversion, Perforce, Git, Mercurial och Bazaar. Endast de grundläggande versionskontrollåtgärderna stöds. Avancerade operationer, till exempel förgrening, måste göras med en separat klient för källkodskontroll.

Även om Komodo inte har en egen JavaScript-formaterare, utnyttjar den den bästa gratis öppen källkod för detta ändamål. Utanför lådan är JS Beautifier som standardformat för JavaScript-filer, men ytterligare nio alternativ är tillgängliga via en rullgardinsmeny.

Komodo IDE stöder felsökning av JavaScript på klientsidan i Chrome och det kan felsöka Node.js både lokalt och på distans. Det felsöker också Perl, Python, PHP, Ruby, Tcl och XSLT.

Komodo IDE har en DOM-visning som låter dig visa XML- och HTML-dokument som hopfällbara träd. Det låter dig också göra XPath-sökningar för att filtrera trädet.

Komodos kodprofilering och enhetstestmoduler stöder inte JavaScript. Men JavaScript och Node.js stöds båda av Komodos kodintelligensmodul, som implementerar kodsökning, autoslutförande och samtalstips.

Komodo IDE kan publicera grupper av filer via FTP, SFTP, FTPS eller SCP. Komodo kan också synkronisera filer och upptäcka potentiella publiceringskonflikter som kan få dig att skriva över andras förändringar.

Sammantaget är Komodo en bra men inte bra JavaScript IDE och en bra men inte bra JavaScript-redigerare. Det kan dock väl tillgodose dina behov, särskilt om du också arbetar med Perl, Python, PHP, Ruby, Tcl eller XSLT.

Kostnad: $ 295, plus $ 87 per år för uppgraderingar och support. Plattform: Windows (7 eller högre), MacOS (10.9 eller högre), Linux.

Apache NetBeans

NetBeans har mycket bra stöd för JavaScript, HTML5 och CSS3 i webbprojekt, och det stöder Cordova / PhoneGap-ramverket för att bygga JavaScript-baserade mobilapplikationer. NetBeans är inte den snabbaste IDE på blocket, men det är en av de mer kompletta. Och naturligtvis är priset rätt: NetBeans finns gratis under en öppen källkodslicens.

NetBeans JavaScript-redigerare ger syntaxmarkering, autoslutförande och kodvikning, ganska mycket som du förväntar dig. JavaScript-redigeringsfunktionerna fungerar också för JavaScript-koden inbäddad i PHP-, JSP- och HTML-filer. jQuery-stöd bakas in i redigeraren. NetBeans 8.2 har nytt eller förbättrat stöd för Node.js och Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha och Selen.

Kodanalys körs i bakgrunden när du redigerar och ger varningar och tips. Felsökning fungerar i den inbäddade WebKit-webbläsaren och i Chrome med NetBeans Connector installerad. Felsökaren kan ställa in brytpunkter för DOM, linje, händelse och XMLHttpRequest, och den visar variabler, klockor och samtalsstacken. Ett integrerat webbläsarloggfönster visar webbläsarens undantag, fel och varningar.

NetBeans kan konfigurera och utföra enhetstester med JsTestDriver, en JAR-fil (Java-arkiv) som du kan ladda ner gratis. Felsökning av enhetstester aktiveras automatiskt om du anger Chrome med NetBeans Connector som en av JsTestDriver-webbläsarna när du konfigurerar JsTestDriver i fönstret Tjänster.

När du felsöker ett webbprogram i Chrome med NetBeans Connector och redigerar CSS från Chrome Developer Tools, kommer ändringarna att fångas av NetBeans och sparas i CSS-filerna. Om dina CSS-filer genererades från mindre eller Sass-stilark måste du emellertid uppdatera källbladet manuellt eftersom CSS-filerna bara är kompilerade utdata.

I den inbäddade WebKit-webbläsaren och i Chrome med NetBeans Connector installerad kan du använda NetBeans-nätverksmonitorn för att visa förfrågningsrubriker, svar och samtalsstackar för REST-kommunikation. För WebSocket-kommunikation visas både rubriker och textramar. Sammantaget ger NetBeans en lite bättre felsökningsupplevelse med Chrome än vad du får i Firefox med Firebug.

NetBeans integrerar källkodskontroll med Git, Subversion, Mercurial och CVS. Git-stödet utökas av en grafisk Diff-tittare och av ett hyllsystem inom IDE. NetBeans färgkodar Git-status för filer, låter dig se revisionshistorik för varje fil och visar dig revisions- och författarinformation för varje rad versionskontrollerade filer. NetBeans har liknande integrationer med Subversion, Mercurial och CVS, men jag testade bara Git.

NetBeans integrerar problemspårning med Jira och Bugzilla. I uppgiftsfönstret NetBeans kan du söka efter uppgifter, spara sökningar, uppdatera uppgifter och lösa uppgifter i ditt registrerade uppgiftsförvar. NetBeans har också teamserverintegration för webbplatser som använder Kenai-infrastrukturen.

Såvitt jag kan bestämma saknar NetBeans någon JavaScript-profilering, även om det kan profilera Java-applikationer och EJB-moduler. Och även om NetBeans kan omformulera Java och PHP, kan det inte omformulera JavaScript.

Sammantaget är NetBeans en anständig utmanare för utveckling av JavaScript, HTML5 och CSS3 på klientsidan, speciellt om du också gör Java, PHP eller C ++ utveckling på servern. Om du inte har budgeten för WebStorm och ogillar Microsoft, kommer du att upptäcka att NetBeans gör jobbet, så länge du inte har bråttom.

Kostnad: Gratis. Plattform: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

I min fullständiga recension av Visual Studio 2017 diskuterade jag produkten som helhet, med bara några få referenser till JavaScript. Jag kommer att vända betoningen här.

Sammantaget tjänar Visual Studio 2017 mycket bra som en JavaScript IDE, även om det är en bättre. NET IDE, och det är inte lika bra som WebStorm för JavaScript. Även om det också fungerar mycket bra som en JavaScript-redigerare, är det en bättre C # -redigerare, och den är inte lika bra eller lika snabb som Sublime Text för JavaScript.

Som du kan se på skärmdumpen nedan gör Visual Studio 2017 ett bra jobb med JavaScript-syntaxfärgning och kodvikning. Det gör också ett bra jobb med JavaScript-kodnavigering: Högerklicka på en funktion eller medlemsnamn, och du kan enkelt hoppa till definitionen eller hitta alla referenser. När du är klar med att titta på definitionen kan du trycka på bakåtpilen längst upp i gränssnittet för att gå tillbaka till var du var.

Du kan enkelt infoga utdrag och omger ditt val med lämplig kod, till exempel HTML eller URL-kodning av strängvariabler. Förutom JavaScript, HTML och CSS kan du redigera Markdown-filer och se den renderade Markdown och du kan arbeta med TypeScript.

Dessutom kan du naturligtvis koda på vilket .Net-språk som helst, i C ++ och i Python. Och som har varit fallet för Visual Studio under lång tid kan du arbeta med databaser direkt från IDE. Visual Studio är särskilt starkt när man arbetar med SQL Server-databaser. Du kan komma undan med att använda Visual Studio istället för SQL Server Management Studio för de flesta databasåtgärder som du vill göra som utvecklare.

Visual Studio 2017 stöder felsökning i nästan alla webbläsare du bryr dig om, inklusive webbläsare på mobila enheter och i emulatorer. Det har också två egna webbläsare: den vanliga interna webbläsaren, som är (överraskning!) En version av Internet Explorer, och Page Inspector, som visar den renderade sidan tillsammans med alla källor och stilar. Även om sidinspektören gör mycket potentiellt tidskrävande, omvänd teknik för att ställa in sig själv för en sida, kan du stanna kvar där utan att behöva jonglera Visual Studio, webbläsaren och webbläsarens utvecklarverktyg. .

Prestanda för Visual Studio 2017 är vanligtvis ganska bra om du ger det tillräckligt med minne och CPU-effekt, men det tenderar att kräva betydande resurser. Visual Studio 2017 har bra prestandadiagnostik för applikationer, men i stort sett är de inte så användbara för vanlig JavaScript-kod, som vanligtvis körs djupt inne i en webbläsare. Visual Studio har specifik timing för JavaScript-funktion, HTML UI-respons och JavaScript-minnesverktyg, men de gäller bara JavaScript-baserade Universal Windows Platform-projekt, inte webbprojekt som råkar använda JavaScript.

Visual Studio 2017 inkluderar utmärkt redigering av Node.js-applikationer, IntelliSense, profilering, NPM-integration, TypeScript-stöd, felsökning lokalt och på distans (Windows, MacOS, Linux) och felsökning på Azure Web Apps och Azure Cloud Services. Det har också stöd för CSS, HTML, JavaScript, TypeScript, CoffeeScript och Less. Detta inkluderar att köra JSHint medan du skriver, så att du kan minimera JavaScript-filer från en snabbmeny och automatiskt kompilera CoffeeScript-filer vid spara och visa en sida-vid-sida-förhandsvisning av det genererade JavaScript.