Recensione: i 6 migliori IDE JavaScript

JavaScript viene utilizzato oggi per molti diversi tipi di applicazioni. Molto spesso, JavaScript funziona con HTML5 e CSS per creare front-end web. Ma JavaScript aiuta anche a creare applicazioni mobili e ha trovato un posto importante nel back-end sotto forma di server Node.js. Fortunatamente, gli strumenti di sviluppo JavaScript, sia editor che IDE, stanno crescendo per affrontare le nuove sfide.

Perché usare un IDE invece di un editor? Il motivo principale è che un IDE può eseguire il debug e talvolta profilare il codice. Gli IDE supportano anche i sistemi ALM, integrandosi con Git, GitHub, Mercurial, Subversion e Perforce per il controllo della versione. Tuttavia, poiché sempre più editor aggiungono hook a questi sistemi, il supporto ALM sta diventando sempre meno un elemento di differenziazione.

Eclipse 2018 con strumenti di sviluppo JavaScript

Ai tempi antichi, quando Java Swing era nuovo ed eccitante, mi piaceva usare Eclipse per lo sviluppo Java, ma presto sono passato ad altri IDE Java. Più di cinque anni fa, quando ho sviluppato un po 'di sviluppo Android con Eclipse, ho trovato l'esperienza OK, ma angusta. Quando ho provato a utilizzare Eclipse Luna con JSDT per lo sviluppo di JavaScript nel 2014, mostrava costantemente errori di falsi positivi per il codice valido che superava JSHint.

Video correlato: che cos'è JavaScript? Il creatore Brendan Eich spiega

Brendan Eich, creatore del linguaggio di programmazione JavaScript, spiega come viene utilizzato il linguaggio e perché è ancora uno dei preferiti dai programmatori per la sua facilità d'uso.

Fortunatamente, da allora, diversi fornitori e progetti open source si sono fatti avanti. Eclipse 2018 con JavaScript Development Tools ha un editor JavaScript decente e un debugger basato su Chrome, ma non conosce TypeScript, che viene utilizzato da Angular, né i file ES6 e JSX, che vengono utilizzati da React.

Eclipse ha sempre goduto di un enorme mercato di plugin. Per TypeScript, considera il plug-in TypeScript 1.0.0 gratuito. Per Angular, TypeScript ed ES6, considera l'IDE Angular commerciale (di CodeMix, precedentemente Webclipse) e per i progetti React con file JSX prova l'IDE TypeScript open source. Se ne aggiungi più di uno, dovrai risolvere la controversia su quale dovrebbe modificare i file TypeScript, ma non è un grosso problema.

Gli strumenti CodeMix vengono fatturati come l'aggiunta degli smart di Visual Studio Code a Eclipse. A differenza della maggior parte dei plugin Eclipse, Angular IDE di CodeMix non è gratuito, ma ha una prova gratuita di 45 giorni. Dato che Visual Studio Code è gratuito, lo prenderei in considerazione prima di pagare per Angular IDE.

Senza costi; IDE angolare di CodeMix, $ 29 (personale) o $ 48 (commerciale) all'anno. Piattaforma: Windows, MacOS e Linux.

IDE Komodo di ActiveState

Sono stato un utente e un fan di Komodo IDE da quando è stato introdotto per la prima volta nel 2001. Sebbene i prodotti più recenti come Visual Studio Code e WebStorm lo abbiano superato in alcune aree, è ancora un buon editor e IDE.

Komodo IDE fornisce editing JavaScript avanzato, evidenziazione della sintassi, navigazione e debug, ma non include il controllo del codice JavaScript. Per questo, puoi sempre eseguire JSHint in una shell.

Komodo supporta dozzine di linguaggi di programmazione e markup. Con la sua vasta gamma di supporto per linguaggi di programmazione e markup, inclusi refactoring, debugging e profiling, Komodo IDE è un'ottima scelta per lo sviluppo end-to-end in linguaggi open source.

Komodo ha un modulo di refactoring del codice per tutti i linguaggi per i quali fornisce informazioni sul codice: PHP, Perl, Python, Ruby, Tcl, JavaScript e Node.js. Sfortunatamente, la natura del "minimo comune denominatore" di questo approccio limita le capacità di rinominare variabili e membri di classi e di estrarre codice in un metodo. Tuttavia, questi sono alcuni dei casi più utili.

Komodo IDE ha sia la modifica delle colonne che le selezioni multiple. Ciò fornisce una quasi parità con Sublime Text e TextMate per quanto riguarda le modifiche di massa. Finché facciamo il confronto, Komodo è più un IDE, mentre Sublime Text è molto più veloce. E finché parliamo di prestazioni, la velocità di Komodo è migliorata notevolmente rispetto alle versioni precedenti, nel disegno dello schermo, nella ricerca e nel controllo della sintassi.

Komodo IDE ha diverse funzionalità che mancano alla maggior parte dei prodotti concorrenti. Uno è il suo HTTP Inspector, eccellente per il debug dei callback Ajax. Un altro è il suo toolkit Rx (espressione regolare o regex), che è un ottimo modo per creare e testare espressioni regolari per JavaScript, Perl, PHP, Python e Ruby.

La collaborazione è un altro elemento di differenziazione dell'IDE di Komodo: pensala come Google Docs per il codice. Puoi creare sessioni per gruppi di file, aggiungere contatti alle sessioni come collaboratori, quindi lavorare insieme sugli stessi file contemporaneamente, con sincronizzazione quasi in tempo reale.

La collaborazione non sostituisce il controllo del codice sorgente, ma è un utile supplemento. Komodo IDE integra il controllo del codice sorgente utilizzando CVS, Subversion, Perforce, Git, Mercurial e Bazaar. Sono supportate solo le operazioni di controllo della versione di base. Le operazioni avanzate, come la ramificazione, devono essere eseguite utilizzando un client di controllo del codice sorgente separato.

Sebbene Komodo non abbia il proprio formattatore di documenti JavaScript, sfrutta il miglior open source gratuito per questo scopo. Per impostazione predefinita, il formattatore predefinito per i file JavaScript è JS Beautifier, ma altre nove opzioni sono disponibili tramite un menu a discesa.

L'IDE di Komodo supporta il debug di JavaScript lato client in Chrome e può eseguire il debug di Node.js sia in locale che in remoto. Esegue anche il debug di Perl, Python, PHP, Ruby, Tcl e XSLT.

Komodo IDE ha un visualizzatore DOM che ti consente di visualizzare documenti XML e HTML come alberi comprimibili. Consente inoltre di eseguire ricerche XPath per filtrare l'albero.

I moduli di profilazione del codice e di unit test di Komodo non supportano JavaScript. Tuttavia, JavaScript e Node.js sono entrambi supportati dal modulo Code Intelligence di Komodo, che implementa l'esplorazione del codice, il completamento automatico e i suggerimenti di chiamata.

Komodo IDE può pubblicare gruppi di file su FTP, SFTP, FTPS o SCP. Komodo può anche sincronizzare i file e rilevare potenziali conflitti di pubblicazione che potrebbero farti sovrascrivere le modifiche di altre persone.

Nel complesso, Komodo è un IDE JavaScript buono ma non eccezionale e un editor JavaScript buono ma non eccezionale. Tuttavia, potrebbe soddisfare le tue esigenze, specialmente se lavori anche con Perl, Python, PHP, Ruby, Tcl o XSLT.

Costo: $ 295, più $ 87 all'anno per aggiornamenti e supporto. Piattaforma: Windows (7 o superiore), MacOS (10.9 o superiore), Linux.

Apache NetBeans

NetBeans ha un ottimo supporto per JavaScript, HTML5 e CSS3 nei progetti web e supporta il framework Cordova / PhoneGap per la creazione di applicazioni mobili basate su JavaScript. NetBeans non è l'IDE più veloce del blocco, ma è uno dei più completi. E, naturalmente, il prezzo è giusto: NetBeans è disponibile gratuitamente con una licenza open source.

L'editor JavaScript di NetBeans fornisce l'evidenziazione della sintassi, il completamento automatico e la piegatura del codice, praticamente come ti aspetteresti. Le funzionalità di modifica JavaScript funzionano anche per il codice JavaScript incorporato nei file PHP, JSP e HTML. Il supporto jQuery è integrato nell'editor. NetBeans 8.2 ha un supporto nuovo o migliorato per Node.js ed Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha e Selenium.

L'analisi del codice viene eseguita in background durante la modifica, fornendo avvisi e suggerimenti. Il debug funziona nel browser WebKit incorporato e in Chrome con NetBeans Connector installato. Il debugger può impostare punti di interruzione DOM, riga, evento e XMLHttpRequest e visualizzerà variabili, orologi e lo stack di chiamate. Una finestra di registro del browser integrata visualizza le eccezioni, gli errori e gli avvisi del browser.

NetBeans può configurare ed eseguire unit test con JsTestDriver, un file JAR (archivio Java) che puoi scaricare gratuitamente. Il debug degli unit test viene abilitato automaticamente se specifichi Chrome con NetBeans Connector come uno dei browser JsTestDriver quando configuri JsTestDriver nella finestra Servizi.

Quando esegui il debug di un'applicazione web in Chrome con il connettore NetBeans e modifichi CSS dagli strumenti per sviluppatori di Chrome, le modifiche verranno acquisite da NetBeans e salvate nei file CSS. Tuttavia, se i tuoi file CSS sono stati generati da fogli di stile Less o Sass, dovrai aggiornare manualmente il foglio sorgente perché i file CSS sono semplicemente output compilato.

Nel browser WebKit incorporato e in Chrome con NetBeans Connector installato, è possibile utilizzare il monitor di rete NetBeans per visualizzare le intestazioni delle richieste, le risposte e gli stack di chiamate per le comunicazioni REST. Per le comunicazioni WebSocket, vengono visualizzate sia le intestazioni che le cornici di testo. Nel complesso, NetBeans offre un'esperienza di debug leggermente migliore con Chrome rispetto a Firefox con Firebug.

NetBeans integra il controllo del codice sorgente con Git, Subversion, Mercurial e CVS. Il supporto Git è potenziato da un visualizzatore grafico di differenze e da un sistema di scaffalature all'interno dell'IDE. NetBeans codifica a colori lo stato Git dei file, consente di visualizzare la cronologia delle revisioni per ogni file e mostra le informazioni sulla revisione e sull'autore per ogni riga di file controllati dalla versione. NetBeans ha integrazioni simili con Subversion, Mercurial e CVS, ma ho provato solo Git.

NetBeans integra il monitoraggio dei problemi con Jira e Bugzilla. Nella finestra delle attività di NetBeans è possibile cercare attività, salvare ricerche, aggiornare attività e risolvere attività nel repository delle attività registrato. NetBeans ha anche l'integrazione del team server per i siti che utilizzano l'infrastruttura Kenai.

Per quanto posso determinare, NetBeans non ha alcuna profilazione JavaScript, sebbene possa profilare applicazioni Java e moduli EJB. E mentre NetBeans può eseguire il refactoring di Java e PHP, non può eseguire il refactoring di JavaScript.

Nel complesso, NetBeans è un buon concorrente per lo sviluppo di JavaScript, HTML5 e CSS3 lato client, soprattutto se si esegue anche lo sviluppo Java, PHP o C ++ sul server. Se non hai il budget per WebStorm e non ti piace Microsoft, scoprirai che NetBeans fa il lavoro, a patto che tu non abbia molta fretta.

Senza costi. Piattaforma: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

Nella mia recensione completa di Visual Studio 2017 ho discusso del prodotto nel suo insieme, con solo pochi riferimenti a JavaScript. Invertirò l'enfasi qui.

Nel complesso, Visual Studio 2017 funziona molto bene come IDE JavaScript, sebbene sia un IDE .Net migliore e non è buono come WebStorm per JavaScript. Sebbene funzioni anche molto bene come editor JavaScript, è un editor C # migliore e non è buono o veloce come Sublime Text per JavaScript.

Come puoi vedere nello screenshot qui sotto, Visual Studio 2017 fa un buon lavoro con la colorazione della sintassi JavaScript e la piegatura del codice. Fa anche un buon lavoro con la navigazione nel codice JavaScript: fai clic con il pulsante destro del mouse su una funzione o sul nome di un membro e puoi saltare facilmente alla definizione o trovare tutti i riferimenti. Quando hai finito di guardare la definizione, puoi premere la freccia indietro nella parte superiore dell'interfaccia per tornare al punto in cui ti trovavi.

Puoi inserire facilmente snippet e racchiudere la tua selezione con codice appropriato, come codifica HTML o URL di variabili stringa. Oltre a JavaScript, HTML e CSS, puoi modificare i file Markdown e vedere il Markdown renderizzato, e puoi lavorare con TypeScript.

Inoltre, puoi ovviamente scrivere codice in qualsiasi linguaggio .Net, in C ++ e in Python. E come accade da molto tempo per Visual Studio, puoi lavorare con i database direttamente dall'IDE. Visual Studio è particolarmente potente quando si lavora con i database di SQL Server. Puoi farla franca utilizzando Visual Studio invece di SQL Server Management Studio per la maggior parte delle operazioni di database che vorresti eseguire come sviluppatore.

Visual Studio 2017 supporta il debug praticamente in tutti i browser che ti interessano, inclusi i browser sui dispositivi mobili e negli emulatori. Ha anche due browser propri: il semplice browser web interno, che è (sorpresa!) Una versione di Internet Explorer, e il Page Inspector, che mostra la pagina renderizzata insieme a tutte le fonti e gli stili. Sebbene il Page Inspector esegua molte attività di reverse engineering potenzialmente dispendiose in termini di tempo per configurarsi per una pagina, una volta che ci sei dentro puoi rimanere lì senza dover destreggiarsi tra Visual Studio, il browser e gli strumenti di sviluppo del browser .

Le prestazioni di Visual Studio 2017 sono generalmente piuttosto buone se gli dai abbastanza memoria e potenza della CPU, ma tende a richiedere risorse significative. Visual Studio 2017 offre un'ottima diagnostica delle prestazioni per le applicazioni, ma in generale non sono così utili per il normale codice JavaScript, che in genere viene eseguito in profondità all'interno di un browser. Visual Studio ha una temporizzazione specifica della funzione JavaScript, reattività dell'interfaccia utente HTML e strumenti di memoria JavaScript, ma si applicano solo ai progetti della piattaforma Windows universale basati su JavaScript, non ai progetti Web che utilizzano JavaScript.

Visual Studio 2017 include un'eccellente modifica dell'applicazione Node.js, IntelliSense, creazione di profili, integrazione NPM, supporto TypeScript, debug locale e remoto (Windows, MacOS, Linux) e debug su app Web di Azure e servizi cloud di Azure. Supporta anche CSS, HTML, JavaScript, TypeScript, CoffeeScript e Less. Ciò include l'esecuzione di JSHint durante la digitazione, la possibilità di minimizzare i file JavaScript da un menu contestuale e la compilazione automatica dei file CoffeeScript al salvataggio, mostrando un'anteprima affiancata del JavaScript generato.