Recensione: i 10 migliori editor JavaScript

I programmatori JavaScript hanno molti buoni strumenti tra cui scegliere, quasi troppi per tenerne traccia. In questo articolo, discuto 10 editor di testo con un buon supporto per lo sviluppo con JavaScript, HTML5 e CSS e per la documentazione con Markdown. Perché utilizzare un editor per la programmazione JavaScript invece di un IDE? In una parola: velocità.

La differenza essenziale tra editor e IDE è che gli IDE possono eseguire il debug e talvolta profilare il codice e gli IDE supportano i sistemi ALM (Application Lifecycle Management). Molti degli editor di cui discutiamo qui supportano almeno un sistema di controllo della versione, spesso Git, quindi quel criterio è meno differenziatore tra IDE ed editor di quanto non fosse in passato.

Sublime Text e Visual Studio Code sono i migliori tra gli editor JavaScript: Sublime Text per la sua velocità tanto quanto le sue comode funzionalità di modifica e Visual Studio Code per funzionalità ancora migliori e velocità quasi altrettanto buona. Brackets occupa il terzo posto. Mentre TextMate si è classificato in cima alla mia lista alcuni anni fa, le sue capacità non hanno tenuto il passo con i nuovi sviluppi.

Molto probabilmente, troverai il tuo editor JavaScript preferito in Sublime Text, Visual Studio Code o Brackets. Ma molti altri strumenti — Atom, BBEdit, Komodo Edit, Notepad ++, Emacs e Vim — hanno tutti qualcosa da consigliare. A seconda dell'attività da svolgere, potresti trovarne uno a portata di mano.

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.

Esaminiamo le opzioni e confrontiamole alla fine.

Testo sublime

Se desideri un editor di testo di programmazione flessibile, potente ed estensibile che sia velocissimo e non ti dispiace passare ad altre finestre per il controllo del codice, il debug e la distribuzione, non cercare oltre Sublime Text.

Oltre alla velocità, i numerosi punti di forza degni di nota di Sublime Text supportano più di 70 tipi di file, tra cui JavaScript, HTML e CSS; navigazione quasi istantanea e commutazione istantanea del progetto; selezioni multiple (effettua una serie di modifiche tutte in una volta), comprese le selezioni di colonne (seleziona un'area rettangolare del file); finestre multiple (usa tutti i tuoi monitor) e finestre divise (sfrutta lo spazio sullo schermo); personalizzazione completa con semplici file JSON; un'API plug-in basata su Python; e una tavolozza dei comandi unificata e ricercabile.

Per i programmatori provenienti da altri editor, Sublime Text supporta i bundle TextMate (esclusi i comandi) e l'emulazione Vi / Vim. La documentazione non ufficiale di Sublime Text fa osservazioni denigratorie (e non corrette) sugli utenti di Emacs ( moi , per esempio), ma le trascurerò. Perché esiste anche la documentazione non ufficiale di Sublime Text? Ebbene, per prima cosa, la documentazione ufficiale è meno che completa, molto meno.

Quando ho detto "navigazione quasi istantanea" prima, intendevo sul serio. Ad esempio, per passare dalla posizione corrente sullo schermo alla definizione di getResponseHeaderin ajax.js, posso digitare Command-P su un Mac o Ctrl-P su un PC, quindi ajper aprire una vista transitoria in ajax.js, quindi @grhe Invio per aprire una scheda con getResponseHeaderselezionato. Sublime Text è in grado di tenere il passo con la mia digitazione. Sembra reattivo come alcuni dei migliori vecchi editor DOS come Brief e Kedit.

Una volta selezionato  getResponseHeader, posso trovare tutti gli usi della funzione nel contesto digitando Maiuscole-Comando-F su un Mac o Maiusc-Ctrl-F su un PC, quindi Invio. Una nuova scheda mi mostrerà i risultati della ricerca con il termine di ricerca racchiuso in ogni frammento di cinque righe. Facendo doppio clic sul testo in riquadro viene visualizzato il contesto completo del file in una nuova scheda.

Facendo clic sul nome di un file nella barra laterale di sinistra delle cartelle, viene visualizzata una scheda temporanea che mostra il contenuto del file. Fare clic su un file diverso sostituisce quella scheda. Anche in questo caso, Sublime Text è in grado di tenere il passo con la digitazione e il clic. Allo stesso modo, la navigazione di dimensioni ridotte in alto a destra della pagina mi consente di spostarmi all'interno di un file quasi istantaneamente, senza l'overhead dello scorrimento. Vorrei che Microsoft Word fosse altrettanto reattivo.

Le selezioni multiple e le selezioni di colonne rendono il lavoro rapido dei tipi di modifiche fastidiose che richiedevano espressioni regolari. Hai bisogno di trasformare un elenco di parole in una struttura JSON in cui ogni parola è racchiusa tra virgolette doppie e ogni parola citata è separata dalla successiva da una virgola? In Sublime Text sono necessarie circa otto sequenze di tasti, indipendentemente dal numero di parole presenti nell'elenco.

Sulla mia scatola di sviluppo Windows, utilizzo due monitor larghi. Sul mio MacBook, utilizzo il display Retina più un display Thunderbolt. A meno che non modifichi su un display e esegua il debug sull'altro, di solito voglio vedere simultaneamente molti file sorgente diversi e viste diverse nei file sorgente. Sublime Text supporta più finestre, finestre divise, più aree di lavoro per progetto, più visualizzazioni e più riquadri contenenti visualizzazioni. È abbastanza semplice utilizzare tutto lo spazio sullo schermo quando lo desidero e consolidarlo quando ho bisogno di fare spazio per il debug e il test.

Puoi personalizzare tutto su Sublime Text: la combinazione di colori, il carattere del testo, le associazioni di tasti globali, i punti di tabulazione, le associazioni di tasti e gli snippet specifici del file e persino le regole di evidenziazione della sintassi. Le preferenze sono codificate come file JSON. Le definizioni specifiche della lingua sono file di preferenze XML. C'è una comunità attiva intorno a Sublime Text che crea e gestisce pacchetti e plugin di Sublime Text. Molte funzionalità che inizialmente pensavo mancassero a Sublime Text, incluse le interfacce JSLint e JSHint, JsFormat, JsMinify, PrettyJSON e il supporto Git, si sono rivelate disponibili attraverso la comunità, utilizzando il Package Installer.

Uno dei motivi delle ottime prestazioni di Sublime Text è che è strettamente codificato. Un altro motivo è che Sublime Text non è un IDE e non necessita dell'overhead contabile di un IDE.

Dal punto di vista di uno sviluppatore, questo è un compromesso complicato. Se ti trovi in ​​uno stretto ciclo di sviluppo basato su test di "rosso, verde, refactoring", un IDE impostato per modificare, testare, refactoring e monitorare la copertura del codice ti sarà di grande aiuto. Se stai facendo revisioni del codice o modifiche importanti, d'altra parte, ti consigliamo l'editor più veloce ed efficiente che puoi trovare. Quell'editor potrebbe essere Sublime Text.

Costo: prova gratuita illimitata; $ 70 per utente per licenza aziendale o personale. Piattaforme: Windows, MacOS e Linux.

Codice di Visual Studio

Visual Studio Code è un editor leggero e gratuito e IDE di Microsoft. Ha componenti di Visual Studio, combinati con la shell Atom Electron open source, fornendo un eccellente supporto per lo sviluppo di ASP.Net Core con C # e per lo sviluppo di Node.js con TypeScript e JavaScript. Rompendo con il modello storico di Microsoft di supportare solo Visual Studio su Windows, Visual Studio Code funziona anche su MacOS e Linux. Lo screenshot qui sotto è stato acquisito su MacOS.

Visual Studio Code ha un completamento del codice JavaScript incredibilmente buono, grazie all'inclusione del compilatore TypeScript e del motore Salsa. Visual Studio Code invia il codice JavaScript al compilatore TypeScript in background per dedurre i tipi e creare una tabella dei simboli. Puoi vedere i risultati nella casella vicino alla parte inferiore dell'immagine dello schermo che mostra le informazioni per il  hasOwnProperty metodo.

La stessa tabella dei simboli consente a IntelliSense di fornire ottimi elenchi di opzioni a comparsa per il completamento del codice durante la digitazione di un'espressione. Si ottengono chiusura automatica delle parentesi, opzioni di completamento automatico delle parole, elenchi di metodi automatici dopo la digitazione .e elenchi di parametri automatici all'interno di un metodo. È possibile migliorare IntelliSense aggiungendo riferimenti ai file d.ts da  DefinitelyTypede Visual Studio Code si offrirà di farlo per te quando riconosce problemi comuni, come l'uso di  __dirname, che è una variabile incorporata di Node.js.

Il supporto di Git è molto buono e abbastanza semplice da usare. Il debugger di Visual Studio Code offre un'eccellente esperienza di debug per lo sviluppo di Node.js (e lo sviluppo di ASP.Net). Visual Studio Code dispone di ottimi strumenti per HTML, CSS, Less, Sass e JSON, basati sulla stessa tecnologia alla base degli strumenti di sviluppo F12 di Internet Explorer. Inoltre, ha un'integrazione personalizzabile con task runner esterni come  gulp e  jake.

Visual Studio Code ha attratto un solido ecosistema di plug-in, ad esempio per supportare Angular e React. Ora è l'editor che consiglio quando scrivo tutorial sulla creazione di app con framework e librerie JavaScript e TypeScript.

Costo: open source gratuito. Piattaforma: Windows, MacOS e Linux.

Parentesi

Brackets è un editor open source gratuito, originario di Adobe, creato per fornire strumenti migliori per JavaScript, HTML e CSS, oltre alle relative tecnologie web aperte. Brackets stesso è scritto in JavaScript, HTML e CSS e gli sviluppatori utilizzano Brackets per creare Brackets. Oltre alle funzionalità integrate, Brackets dispone di un gestore di estensioni e sono disponibili estensioni per molti dei linguaggi e degli strumenti utilizzati dagli sviluppatori front-end. Brackets non è veloce come Sublime Text o TextMate, ma è comunque abbastanza veloce tranne che per le pause per caricare o aggiornare il contenuto del programma dal web.

Brackets ha un buon supporto per JavaScript, CSS, HTML e Node.js. Ha anche caratteristiche interessanti come la modifica in linea dei CSS relativi a un ID HTML (Modifica rapida). Inoltre, Brackets presenta un'interfaccia utente pulita e un'anteprima dal vivo per le pagine web che stai modificando. È un'ottima scelta per un editor di codice gratuito.

Il completamento automatico JavaScript in Parentesi è molto buono, con la chiusura automatica di parentesi, parentesi angolari e parentesi quadre, nonché menu a discesa automatici per parole chiave, variabili e metodi, inclusi i metodi jQuery dopo la digitazione $. Le parentesi possono controllare il debugger Node.js e riavviare Node da una voce di menu. È facile aggiungere estensioni per funzionalità aggiuntive come il supporto di TypeScript e JSX, l'integrazione di Bower e l'integrazione di Git.

Modifica rapida, Documenti rapidi, Apertura rapida e Anteprima dal vivo aiutano tutti a semplificare la modifica delle applicazioni Web e consentono di concentrarsi su ciò che si sta codificando o progettando. Sul lato negativo, alcune estensioni Brackets possono essere difficili da configurare, ma non così complicate come i pacchetti Emacs oi plugin Vim.

Costo: open source gratuito. Piattaforme: Windows, MacOS, Linux. 

Atomo

Atom è un editor di programmazione gratuito, open source e hackerabile di GitHub per Windows, MacOS e Linux che si integra con l'app GitHub e ha migliaia di pacchetti e temi disponibili. Me la cavo con alcuni pacchetti della comunità, oltre ai pacchetti e ai temi principali.

Non sorprende, vista la sua origine, il sorgente Atom è ospitato su GitHub. È scritto in CoffeeScript e integrato con Node.js. Atom è una variante specializzata di Chromium progettata per essere un editor di testo piuttosto che un browser web; ogni finestra Atom è essenzialmente una pagina web visualizzata localmente. Il team Atom sviluppa Atom in Atom.

Le prestazioni di Atom sono piuttosto buone quando non si aggiorna da solo. È dotato di funzionalità complete, con un cercatore sfocato, ricerca e sostituzione rapida in tutto il progetto, più cursori e selezioni, più riquadri, frammenti, piegatura del codice e la possibilità di importare grammatiche e temi di TextMate. Atom può installare due utilità da riga di comando: Atom per avviare l'editor da una shell e APM per gestire i pacchetti Atom, nello spirito di NPM per Node.js. Mi trovo a usare molto Atom durante la navigazione nei repository che ho clonato da GitHub, perché l'applicazione GitHub include una voce di menu contestuale per farlo.

Costo: open source gratuito. Piattaforme: Windows, MacOS, Linux.

Komodo Edit

Komodo Edit, la versione gratuita di ActiveState con funzionalità ridotte di Komodo IDE, è un ottimo editor multilingua. Tutto quello che avevo da dire sull'IDE di Komodo come editor (vedi "Recensione: i 6 migliori IDE JavaScript") si applica a Komodo Edit.