JavaScript viene utilizzato per molti diversi tipi di applicazioni oggi. Molto spesso, JavaScript funziona con HTML5 e CSS per creare front-end web. Ma JavaScript aiuta anche a costruire applicazioni mobili, e ha trovato un posto importante sul back-end in forma di Nodo.server js. Fortunatamente, gli strumenti di sviluppo JavaScript – sia gli editor che gli IDE-stanno aumentando 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 hanno anche il supporto per i sistemi ALM, integrandosi con Git, GitHub, Mercurial, Subversion e Perforce per il controllo della versione. Ma come più editori aggiungono ganci a questi sistemi, il supporto ALM sta diventando meno di un elemento di differenziazione.
Eclipse 2018 con gli strumenti di sviluppo JavaScript
Nei tempi antichi in cui Java Swing era nuovo ed eccitante, mi sono divertito ad usare Eclipse per lo sviluppo Java, ma presto sono passato ad altri IDE Java. Cinque anni fa, quando ho fatto un po ‘ di sviluppo Android con Eclipse, ho trovato l’esperienza OK, ma poky., Quando ho provato a utilizzare Eclipse Luna con JSDT per lo sviluppo di JavaScript nel 2014, ha costantemente visualizzato errori falsi positivi per il codice valido che ha superato JSHint.
Fortunatamente, diversi fornitori e progetti open source hanno intensificato al piatto da allora. Eclipse 2018 con gli strumenti di sviluppo JavaScript ha un editor JavaScript decente e un debugger basato su Chrome, ma non conosce TypeScript, che viene utilizzato da Angular, o sui file ES6 e JSX, che vengono utilizzati da React.
Eclipse ha sempre goduto di un enorme mercato di plugin. Per TypeScript, considera il TypeScript gratuito 1.0.,0 estensione. Per Angular, TypeScript e ES6, considera l’IDE angolare 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.
Con un certo sforzo, puoi far funzionare Eclipse con progetti Angular e React., Sebbene Eclipse non supporti i file TypeScript, ES6 o JSX, è possibile aggiungere un IDE angolare e un IDE TypeScript per colmare le lacune.
Gli strumenti CodeMix vengono fatturati come aggiunta di Visual Studio Code smarts 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 il codice di Visual Studio è gratuito, lo considererei prima di pagare l’IDE angolare.
Costo: gratuito; Angular IDE di CodeMix, $29 (personale) o Commercial 48 (commerciale) all’anno. Piattaforma: Windows, macOS e Linux.,
ActiveState Komodo IDE
Sono stato un utente e un fan di Komodo IDE da quando è stato introdotto per la prima volta nel 2001. Anche se i prodotti più recenti come Visual Studio Code e WebStorm hanno 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 decine di linguaggi di programmazione e markup., Con la sua vasta gamma di supporto per la programmazione e il linguaggio di markup, tra cui 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 l’intelligenza del codice: PHP, Perl, Python, Ruby, Tcl, JavaScript e Node.js. Sfortunatamente, la natura” minimo denominatore comune ” di questo approccio limita le capacità alla ridenominazione di variabili e membri di classe e all’estrazione di 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 quasi la parità con Sublime Text e TextMate per quanto riguarda le modifiche di massa. Finché stiamo facendo il confronto, Komodo è più di un IDE, mentre Sublime Text è molto più veloce. E finché stiamo discutendo le 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 caratteristiche che la maggior parte dei prodotti concorrenti mancano. Uno è il suo ispettore HTTP, che è eccellente per il debug dei callback Ajax., Un altro è il suo toolkit Rx (regular expression, 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 IDE di Komodo—pensalo come Google Docs per il codice. È possibile creare sessioni per gruppi di file, aggiungere contatti alle sessioni come collaboratori, quindi lavorare insieme sugli stessi file allo stesso tempo, con sincronizzazione quasi in tempo reale.
La collaborazione non è un sostituto per 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 un proprio formattatore di documenti JavaScript, sfrutta il miglior open source gratuito per questo scopo. Fuori dalla scatola, il formattatore predefinito per i file JavaScript è JS Beautifier, ma altre nove opzioni sono disponibili tramite un menu a discesa.,
Komodo IDE fornisce l’editing JavaScript avanzato, l’evidenziazione della sintassi e la navigazione, ma non include un controllo significativo del codice JavaScript (esegui JSHint per questo). Komodo supporta decine di linguaggi di programmazione e markup, con enfasi su Perl, Python, PHP, Ruby, Tcl e XSLT, e include il debug, il refactoring, l’integrazione del controllo del codice sorgente e il test delle unità.
Komodo IDE supporta il debug JavaScript lato client in Chrome e può eseguire il debug del nodo.js sia localmente che da remoto., Inoltre esegue il debug di Perl, Python, PHP, Ruby, Tcl e XSLT.
Komodo IDE ha un visualizzatore DOM che consente di visualizzare documenti XML e HTML come alberi pieghevoli. Ti permette anche di fare ricerche XPath per filtrare l’albero.
I moduli di code profiling e unit testing di Komodo non supportano JavaScript. Tuttavia, JavaScript e Nodo.js sono entrambi supportati dal modulo Code Intelligence di Komodo, che implementa la navigazione del codice, il completamento automatico e le calltips.
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 causare la sovrascrittura delle modifiche di altre persone.
Nel complesso, Komodo è un IDE JavaScript buono ma non eccezionale e un buon ma non ottimo editor JavaScript. Tuttavia, potrebbe servire 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 sul blocco, ma è uno dei più completi. E, naturalmente, il prezzo è giusto: NetBeans è disponibile gratuitamente sotto una licenza open source.
L’editor JavaScript di NetBeans fornisce l’evidenziazione della sintassi, il completamento automatico e la piegatura del codice, praticamente come ci si aspetterebbe., Le funzioni di modifica JavaScript funzionano anche per il codice JavaScript incorporato nei file PHP, JSP e HTML. Il supporto jQuery viene inserito nell’editor. NetBeans 8.2 ha un supporto nuovo o migliorato per Node.js ed espresso, Gulp, Grugnito, AngularJS, Knockout.js, Giada, Moka e Selenio.
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 il connettore NetBeans installato. Il debugger può impostare i punti di interruzione DOM, line, event e XMLHttpRequest e visualizzerà variabili, orologi e lo stack di chiamate., Una finestra di log del browser integrata visualizza eccezioni, errori e avvisi del browser.
NetBeans può configurare ed eseguire unit testing con JsTestDriver, un file JAR (Java archive) che puoi scaricare gratuitamente. Il debug dei test unitari viene abilitato automaticamente se si specifica Chrome con NetBeans Connector come uno dei browser JsTestDriver quando si configura JsTestDriver nella finestra Servizi.,
Quando si esegue il debug di un’applicazione Web in Chrome con il connettore NetBeans e si modificano i CSS dagli strumenti di sviluppo 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 di origine perché i file CSS sono semplicemente compilati.
Nel browser WebKit incorporato e in Chrome con il connettore NetBeans installato, è possibile utilizzare NetBeans network monitor 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 è aumentato da un visualizzatore Diff grafico e da un sistema di scaffalature all’interno dell’IDE. NetBeans codici colore lo stato Git dei file, consente di visualizzare la cronologia delle revisioni per ogni file e mostra le informazioni di revisione e autore per ogni riga di file controllati dalla versione., NetBeans ha integrazioni simili con Subversion, Mercurial e CVS, ma ho solo testato Git.
NetBeans integra il monitoraggio dei problemi con Jira e Bugzilla. Nella finestra attività NetBeans, è possibile cercare le attività, salvare le ricerche, aggiornare le attività e risolvere le attività nel repository delle attività registrato. NetBeans ha anche l’integrazione di team server per i siti che utilizzano l’infrastruttura Kenai.
Per quanto posso determinare, NetBeans non ha alcun profilo JavaScript, sebbene possa profilare applicazioni Java e moduli EJB., E mentre NetBeans può refactoring Java e PHP, non può refactoring JavaScript.
Nel complesso, NetBeans è un concorrente decente per lo sviluppo JavaScript, HTML5 e CSS3 lato client, specialmente se si sta anche facendo 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, purché non abbia molta fretta.
Costo: Gratuito. Piattaforma: Windows, Solaris, macOS, Linux.,
Microsoft Visual Studio 2017
Nella mia recensione completa di Visual Studio 2017 ho discusso il prodotto nel suo complesso, con solo pochi riferimenti a JavaScript. Invertirò l’enfasi qui.
Nel complesso, Visual Studio 2017 serve molto bene come IDE JavaScript, anche se è un IDE.Net migliore, e non è buono come WebStorm per JavaScript. Mentre serve 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 codice JavaScript: Fare clic destro su una funzione o il nome del membro, e si può facilmente passare alla definizione o trovare tutti i riferimenti. Quando hai finito guardando la definizione, è possibile premere la freccia indietro nella parte superiore dell’interfaccia per tornare al punto in cui eri.
Puoi facilmente inserire frammenti e circondare la tua selezione con codice appropriato, come la codifica HTML o URL di variabili stringa., Oltre a JavaScript, HTML e CSS, puoi modificare i file Markdown e vedere il Markdown reso, e puoi lavorare con TypeScript.
Inoltre, puoi ovviamente codificare in qualsiasi linguaggio.Net, in C++ e in Python. E come è stato il caso per Visual Studio per un lungo periodo, è possibile lavorare con i database direttamente dall’IDE. Visual Studio è particolarmente efficace quando si lavora con database SQL Server. Puoi farla franca usando Visual Studio invece di SQL Server Management Studio per la maggior parte delle operazioni di database che vorresti fare come sviluppatore.,
Visual Studio 2017 supporta il debug praticamente in qualsiasi browser che ti interessa lanciare, 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 l’Ispettore pagina, che mostra la pagina renderizzata insieme a tutte le fonti e gli stili., Anche se l’ispettore pagina fa un sacco di potenzialmente in termini di tempo, roba reverse-engineering per impostare se stesso per una pagina, una volta che siete in esso si può rimanere lì senza dover destreggiarsi Visual Studio, il browser, e gli strumenti di sviluppo del browser.
Le prestazioni di Visual Studio 2017 sono di solito abbastanza buone se si dà abbastanza memoria e potenza della CPU, ma tende a richiedere risorse significative. Visual Studio 2017 ha una diagnostica di grandi prestazioni per le applicazioni, ma in generale non sono poi così utili per il normale codice JavaScript, che in genere viene eseguito in profondità all’interno di un browser., Visual Studio ha specifica funzione di temporizzazione JavaScript, HTML UI reattività, e strumenti di memoria JavaScript, ma si applicano solo a JavaScript-based universale piattaforma Windows progetti, non progetti web che capita di utilizzare JavaScript.
Visual Studio 2017 ha il supporto avanzato per il nodo.js, JavaScript ES6 e TypeScript utilizzando il motore di analisi Salsa. In modalità ES6 può scaricare automaticamente (da DefinitelyTyped) i “typings” per il Nodo.pacchetti js si installa con NPM, per fornire una migliore IntelliSense., Può anche installare automaticamente i moduli NPM mancanti, come si vede in basso a sinistra.
Visual Studio 2017 include Nodo eccellente.modifica delle applicazioni js, IntelliSense, profiling, integrazione NPM, supporto TypeScript, debug locale e remoto (Windows, macOS, Linux) e debug su applicazioni Web Azure e servizi cloud Azure. Ha anche il supporto per CSS, HTML, JavaScript, dattiloscritto, CoffeeScript, e meno., Ciò include l’esecuzione di JSHint durante la digitazione, che consente 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.