Articolo originale: How to Choose the Best JavaScript Editor for Web Development
Ci sono diverse opzioni per gli sviluppatori che stanno cercando un buon editor JavaScript che possa fornire un ambiente di lavoro più efficiente e piacevole.
Gli editor di codice JavaScript che vanno per la maggiore condividono le più importanti funzionalità che ti potresti attendere, compreso l'autocompletamento del codice, l'integrazione con git e il supporto per i plugin. Tuttavia sono le piccole cose che fanno preferire un editor a un altro per ciascun sviluppatore.
Una volta che ti senti a tuo agio con un editor di codice e hai familiarità con il flusso di lavoro che ti rende più efficiente, può essere difficile cambiare editor, in quanto dovresti imparare di nuovo le scorciatoie per ottimizzare il processo di sviluppo.
Anche se nel lungo periodo diventi più efficiente, c'è ancora una ripida curva di apprendimento quando decidi di cambiare editor, quindi vale la pena prendersi un po' di tempo prima di scegliere il miglior editor per le tue necessità.
Esaminiamo alcune delle opzioni più popolari.
Visual Studio Code
VSCode di Microsoft è gratuito, open-source, e abbastanza leggero dopo l'installazione. Questo è de facto l'editor JavaScript per gli sviluppatori principianti, in parte perché è dotato di un buon insieme di funzionalità integrate che non richiedono plugin addizionali. VSCode è popolare e può essere ideale anche per gli sviluppatori più esperti che devono partire velocemente.
Una funzionalità unica di VSCode è che fornisce una versione (Visual Studio Code for the Web) che viene eseguita interamente nel browser. Quindi è possibile avere sempre a disposizione lo stesso identico ambiente che hai nel tuo desktop anche nel tuo tablet. Occorre configurare un code-server su una rete alla quale puoi accedere affinché funzioni, ma è molto conveniente una volta impostato.
Suggerimento: sto lavorando a un grosso progetto in un altro IDE dove il processo di build può richiedere un certo tempo; spesso apro l'enorme file JS di output in VSCode e lo modifico per testare all'istante una modifica nel browser prima di applicarla. VSCode gestisce questi grandi file senza problemi.
Git è incorporato nell'IDE, ma l'integrazione non è così robusta rispetto ad altri editor. Per esempio gli utenti di WebStorm lo preferiscono per la gestione delle operazioni di push/merge rispetto a VSCode.
Puoi installare tante funzionalità aggiuntive quante ne desideri sotto forma di estensioni, e puoi sceglierne tra migliaia. Ma non tutte sono effettive funzionalità. Ci sono anche code snippet e add-on che richiedono tempo per essere valutate e trovare le opzioni migliori da aggiungere. Se hai mai avuto dei problemi, VSCode ha una enorme base di utenti e qualcuno di essi avrà probabilmente già avuto e risolto lo stesso problema.
Se non sei pronto per un IDE a pagamento con tutti i fronzoli e non sei abbastanza a tuo agio con tutti i plugin e le funzionalità di cui potresti aver bisogno, questo è il punto di partenza logico.
Atom
L'editor free Atom è stato sviluppato da GitHub. Si tratta di una versione specializzata del browser chromium convertita in un editor di testo e codice sorgente. Utilizza internamente Node.js per il supporto plugin.
N.d.T.
Al tempo in cui l'articolo è stato tradotto, lo sviluppatore di questo editor ha chiuso il progetto che pertanto non viene più aggiornato/mantenuto. L'ultima versione disponibile e funzionante è la release 1.60.0
Una pletora di plugin è a disposizione per qualsiasi funzionalità tu possa desiderare, anche se non sono tutte già a disposizione dopo l'installazione. Puoi aggiungere un gruppo di plugin per impostare l'ambiente di sviluppo per essere il più efficace possibile. Se stai lavorando con JavaScript, ecco alcuni plugin essenziali per partire:
- atom-typescript
- file-icons - per assegnare e colorare icone per i differenti tipi di file
- atom-beautify
- linter
Suggerimento: abilita il pacchetto di auto salvataggio (autosave) che salverà tutte le modifiche quando viene perso il focus. In modalità predefinita l'opzione è disabilitata.
Più utenti possono lavorare sullo stesso file contemporaneamente, con cursori multipli sullo schermo, tramite il plugin teletype. Puoi usarlo per tutorial, scrittura di codice a due mani o collaborazione. Questa caratteristica distingue Atom dagli altri editor.
L'integrazione con Git è ben implementata, così come ti aspetteresti da un software creato da GitHub. Risulta utile anche il plugin git-plus, che ti consente di eseguire comandi git tramite scorciatoie da tastiera senza usare il terminale git.
La personalizzazione di Atom è così particolareggiata che puoi modificare un file .less per cambiare i colori dell'IDE, il che è ottimo se ti piace avere il controllo su ogni dettaglio del tuo ambiente. Puoi eseguire uno script .coffee all'avvio che può essere usato per modificare velocemente il comportamento dell'editor.
Un'API ben documentata per l'editor ti consente di scrivere plugin in JavaScript. La possibilità di creare la funzionalità e comportamenti personalizzati è molto bella da avere, dovesse servire.
L'esperienza di editing è fluida e puoi migliorarla con altri plugin come minimap, ma ti servirà un po' di tempo all'inizio per impostarlo con tutte le funzionalità desiderate. Il vantaggio è che le funzionalità di cui non hai bisogno non saranno caricate velocizzando i tempi di avvio. Tuttavia, puoi sperimentare un po' di lentezza momentanea quando si caricano file di grandi dimensioni o quando ti sposti tra le schede aperte.
All'inizio mi piacque l'idea di poter modificare gli stili CSS per personalizzare l'ambiente, o quantomeno averne la possibilità se avessi voluto utilizzare i miei temi. Sembra divertente ma in pratica inventare temi che includono molte variabili non sono progetti banali. Fortunatamente ci sono molti plugin di temi ben sviluppati disponibili per il download.
Atom è un editor solido e sarà perfetto per molti sviluppatori.
Sublime Text
Sublime Text è un editor a pagamento ma è disponibile una versione di prova gratuita. Non è dotato di molti plug-in in partenza, ma naturalmente sono disponibili per rispondere a qualsiasi necessità tu possa avere. Alcuni pacchetti come SideBarEnhancements per rinominare, spostare, copiare e incollare dovrebbero probabilmente essere integrati nel core dell'editor, tuttavia li puoi scaricare per abilitare queste funzionalità.
Così come Atom, può richiedere un po' di tempo per impostare tutto, ma una volta sistemato, l'esperienza è molto fluida. Anche il salvataggio quando l'applicazione perde il focus è disponibile.
Sublime Text è bello perché è molto leggero, il che lo rende molto veloce in fase di avvio e per lavorare con grandi progetti o file. L'implementazione della funzionalità di "goto anything" (vai dappertutto) spicca in quanto può essere usata con nomi di file, simboli e numeri di riga. Diversi IDE propongono simili funzionalità in una forma o nell'altra, ma essere in grado di combinarle ed eseguire ricerche tipo "nomeFile@nomeFunzione" è una cosa piuttosto utile.
La selezione di una variabile comporta la selezione di tutte le occorrenze di quella variabile e rinominarla fa rinominare automaticamente tutte le occorrenze, quindi questo comune compito diventa un'esperienza molto snella.
In diversi aspetti Sublime Text è molto simile ad Atom. Tuttavia Sublime Text ha il vantaggio di migliori prestazioni generali e reattività, il che è eccellente.
VIM
Anche Vim è un editor di testo gratuito e molto configurabile. Originariamente si chiamava vi e fu il primo editor testi sviluppato per sistemi Unix; successivamente venne arricchito di molte funzionalità e venne chiamato Vim. È disponibile nella maggior parte delle distribuzioni Linux.
Vim ha robuste capacità di ricerca ed evidenziazione della sintassi, è leggerissimo e ha buone prestazioni anche con file molto grandi. Tuttavia richiede non poco lavoro per impostarlo e renderlo pronto all'uso.
È disponibile una Interfaccia Grafica Utente (GUI), ma non è l'interfaccia predefinita per Vim. Anche l'abilitazione del supporto al mouse richiede qualche azione per poter funzionare. La modalità predefinita è per l'uso da tastiera e c'è chi potrebbe preferire accedere a qualunque controllo e funzionalità tramite scorciatoie da tastiera.
Ciò premesso, Vim può essere il tuo IDE perfetto se puoi investire del tempo per imparare tutti i segreti del software e impostare tutti i comportamenti e le funzionalità che vuoi inserire. Se il tuo tempo è limitato e non puoi fare l'investimento iniziale per impostarlo, Vim potrebbe non essere la scelta migliore per te.
WebStorm
WebStorm è sviluppato da JetBrains e si distingue dagli altri come un reale IDE JavaScript, visto che ha tutte le relative funzionalità integrate e pronte all'uso. L'ambiente di sviluppo per diverse piattaforme come React, Angular, Vue.js, ecc. è senza soluzione di continuità. Puoi eseguire il debug di script node ed eseguire test su un server integrato. Puoi anche lanciare ed eseguire debug di script npm tramite una interfaccia con vista ad albero. Non sono richiesti plugin per fare ciò.
Tuttavia i plugin sono disponibili per qualche rara funzionalità che non sia già direttamente integrata. Un plugin non incluso è una finestra divisa in due che visualizza il codice markdown e la sua anteprima. Tuttavia la maggior parte delle cose che ti servono sono già incluse. Una buona cosa a proposito di questo è che scoprirai funzionalità che non sapevi esistessero e come sia bello averle a disposizione.
In modalità predefinita, i file vengono salvati automaticamente mano a mano che lavori. Quando usi un'altra applicazione che non fa questo, il salvataggio manuale sembra piuttosto primitivo al confronto. Anche se non è una implementazione esclusiva di WebStorm, è comunque un po' più bella.
Alcune persone potrebbe non sempre fidarsi della combinazione ctrl-z per ripristinare a ritroso le modifiche, ma in WebStorm c'è un sistema di controllo di versione che praticamente esegue un commit, interno e separato dai tuoi commit di git, ogni volta che il file viene salvato. I file vengono salvati almeno ogni volta che la finestra che mostra il contenuto del file perde il focus. Quindi se per diverso tempo non esegui commit a git e devi ripristinare o rivedere uno stato precedente dopo il tuo ultimo commit non c'è problema.
Suggerimento: le combinazioni Ctrl-Shift-FrecciaGiù e Ctrl-Shift-FrecciaSu ti consentono di spostare righe o blocchi di codice sotto o sopra mentre l'editor gestisce virgole e contenuto tra parentesi automaticamente.
Quando lavori con progetti che hanno molti file, spostarsi nell'alberatura dei file per cercare uno specifico file potrebbe rallentarti, ma se uno di questi file è già aperto e ha il focus, facendo click sulla sua icona fa scorrere la vista dell'alberatura del progetto a questo file. Molto conveniente.
Un paio di svantaggi sono che è a pagamento, e a volte, può occupare molta memoria per progetti molto grandi. Questo aspetto è migliorato nel corso degli anni e il contenuto dei file è indicizzato internamente in modo che la ricerca su grandi progetti è molto veloce. Un recente aggiornamento include anche un significativo miglioramento delle velocità di avvio.
Suggerimenti Generali di Produttività Per gli Editor
La scorciatoia duplica riga/selezione (in WebStorm: Ctrl-d, in Atom: Ctrl-Shift-d, ma tutti possono farlo) è una delle mie preferite e può salvare molto tempo in molti casi.
Verrà il momento nel quale avrai un elenco di elementi e devi modificare il primo carattere (o alcuni di essi) su ciascuna riga, diciamo sostituendo "." con ",", e in questa situazione la funzionalità di "trova e sostituisci" non è di molto aiuto. WebStorm consente usando il tasto Alt più click del mouse, di piazzare cursori multipli per eseguire la stessa modifica in diversi punti. Tuttavia trovo ancora che il seguente approccio sia più veloce in determinati scenari:
- Piazza il tuo cursore dopo il primo punto, e inizia l'esecuzione della modifica manualmente.
- Usando un dito per ogni tasto premi i tasti Backspace, virgola e Freccia Giù. Usa un dito per ogni tasto e ripeti la digitazione partendo lentamente e progressivamente aumentando la frequenza. Una volta che hai memorizzato la sequenza da eseguire puoi accelerare fino ad attraversare una lista di 200 righe in un attimo.
È quasi come suonare una melodia al pianoforte (più velocemente che puoi). Puoi fare questo anche con elenchi numerati. Scrivi la prima riga senza numero, duplicala 9 volte, poi esegui lo stesso processo eccetto che avrai un dito che userai per digitare un numero in sequenza ogni volta. Inizia le prossime 10 righe con un '1' e ripeti lo stesso processo aggiungendo una cifra dopo ciascun '1'.
Se fai una ricerca su google per “[nome editor] cheatsheet” puoi ottenere un veloce riepilogo di importanti configurazioni o scorciatoie fornite dagli utenti per l'editor che stai provando. Stampale e leggi tutte le scorciatoie per conoscere tutte le nuove caratteristiche e funzionalità delle quali potresti non essere a conoscenza.
Considerare come le azioni sopra descritte possano migliorare il tuo processo corrente porterà dei benefici. Se ne vedi qualcuna che ti può essere di aiuto, evidenziala in modo che la prossima volta che ti troverai in quella situazione sia più facile recuperarla. Anche se la usi raramente e principalmente agli inizi, avere un veloce riferimento a portata di mano potrebbe alleviare il peso di dover conoscerere il tuo editor in profondità e ti potrebbe risparmiare il tempo perso per dover cambiare contesto o per una ricerca nel futuro.
Io sono arrivato al punto di cercare la versione PDF, stamparla e plastificarla per averla comodamente a disposizione in futuro, anche se un segnalibro o una videata possono comunque funzionare.
Conclusione
Se sei un principiante e speri di imparare JavaScript usando un ambiente di sviluppo ben impostato, VSCode è la scelta ovvia perché è facile da usare con molte caratteristiche importanti integrate.
Per molti sviluppatori esperti che sanno esattamente cosa vogliono, Sublime e Atom potrebbe essere preferibili visto che ti daranno il controllo completo del tuo ambiente di sviluppo. Puoi scegliere tra migliaia di funzionalità (pacchetti) da installare e mantenere il processo di avvio e utilizzo di risorse privo di extra che non vuoi o non ti servono. Trascorrere del tempo con ognuno di essi ti aiuterà a fare la scelta giusta.
Per gli utenti hard-core che si sentono a casa utilizzando solo la tastiera lavorando su progetti, posso essere più efficaci con VIM che con qualsiasi altro editor. Risparmiare il tempo necessario alla mano per muoversi tra la tastiera e il mouse si sommerà, ma ci vorrà del tempo per padroneggiare questo processo!
Infine, se non ti dispiace mantenere un abbonamento a pagamento e non ti interessa la memoria o le limitazioni della CPU della macchina con la quale sviluppi, Webstorm ti farà funzionare rapidamente indipendentemente dalle piattaforme di sviluppo JavaScript, transpiler o processi di build con cui lavori. Fornisce un ambiente molto conveniente in cui lavorare.
Personalmente uso WebStorm come mio IDE primario, ma uso regolarmente anche VSCode per l'editing di file singoli o file molto grandi quando le prestazioni sono una priorità.
Se hai apprezzato questo articolo per favore prova a dare un'occhiata a JSCharting, una libreria per grafici JavaScript per sviluppatori. Puoi vedere altri post qui.