Ambiente di sviluppo per node.js

Per anni, sviluppando in java, ho utilizzato ambienti di sviluppo (IDE) come eclipse o netbeans: col tempo sono diventati sempre più pesanti e lenti: ma non se ne puo' fare a meno per lo sviluppo con una tecnologia che prevede la fase di compilazione e tutta una serie di regole su come impachettare gli eseguibili prodotti.

Per sviluppare in node.js, linguaggio interpretato, ho finalmente trovato un ambiente di sviluppo snello, veloce e altamente configurabile: un semplice ma potente editor di testi: Sublime Text 3

Installatelo, non ve ne pentirete, ha una licenza temporanea illimitata, se poi vi piace e lo utilizzerete come faccio io, potrete comprare la licenza e far felice il suo ideatore.

Sublime Text ha una serie di funzionalità veramente comode ed è estendibile tramite dei pacchetti esterni: in questo post vi mostrerò come configurarlo al meglio per sviluppare efficacemente in node.is.

La prima caratteristica che noterete utilizzandolo è la sua velocità, mai più tempi di attesa biblici per aprire o cercare un file.

Sublime text vi farà scordare l'ulizzo del mouse: con semplici scorciatoie da tastiera potrete fare tutto ciò che vi serve, aumentando notevolmente la vostra velocità di programmazione.

Al primo avvio del programma, l'interfaccia utente si presenta così

Tipicamente organizzeremo i singoli progetti node.js in cartelle, la prima cosa da fare è aprire la cartella root del nostro progetto con il comando File -> Open Folder e selezionando la cartella di progetto

Ho aperto la cartella primoesempio contentente i file leggiFile.js e readme.txt: notate come l'editor sia capace di applicare la sintassi colorata a seconda del tipo di estensionde del file che andremo ad aprire.

La prima caratteristica che vi voglio mostrare è la possibilità di utilizzare cursori multipli: supponete di voler cambiare tutte le occorrenze della parola console presente nel file leggiFile.js

• digitate ctrl + i (ricerca incrementale), poi la parola console e poi <enter>: verrà selezionata la prima occorrenza di console all'interno del file
• digitate alt + F3 per selezionare tutte le occorrenze di console nel file
• ora avete 3 cursori attivi in corrispondenza delle tre parole, provate a digitare e tutte le parole verranno modificate allo stesso tempo

Eccellente la ricerca dei file, per nome, all'interno di un progetto. Supponete di avere un progetto con centinaia di files, vi basterra digitare ctrl + p e inserire parte del nome file, otterrete una lista di potenziali file: vi spostate con i tasti cursore e avrete, immediatamente, il file aperto nell'editor.

Altro comando utilissimo ctrl + shift + p, per eseguire qualsiasi comando attivabile dai menu, ad esempio inserite nella combo di ricerca il termine syntax o parte di esso, e comparirà la lista dei comandi per segliere una colorazione per html,css,javascript e così via.

Vediamo ora come configurare il build system per node.js, in modo da attivare l'interprete node.js direttamente dall'editor: scegliete Tools -> Build System -> New Build System ... 

L'editor aprirà un nuovo file di configurazione dal nome untitled.sublime-build, copiate ed incollateci il seguente frammento di configurazione

 {  
   "cmd": ["node", "$file", "$file_base_name"],  
   "working_dir": "${file_path}",  
   "selector": "*.js"  
 }  

Digitate ctrl + s per salvare il file, si aprirà una finestra di dialogo per sceglire un nome: per convenzione, chiamate il file Node.sublime-build e lasciatelo nella posizione scelta dall'editor.

Se ora provate a selezionare nuovamente Tools -> Build System comparirà il nuovo build system associato a Node, selezionatelo e potrete eseguire qualunque programma node.js presente in un file, digitando ctrl + b.

Per far funzionare il nuovo build system, occorre preventivamente installare node.js e mettere nel path di sistema la cartella degli eseguibili di node.js, ma credo e spero che, a questo punto, lo abbiate già fatto.

La parte in cui eccelle Sublime Text è la possibilità di aggiungere funzionalità aggiuntive direttamente da un repository centralizzato accessibile in rete.

Per poter intallare un package aggiuntivo, bisogna però prima installare il package manager tramite  una provedura una tantum che ci permetterà, in seguito, di installare qualsiasi nuovo package in una manciata di secondi.

Per installare il package manager seguite le istruzioni presenti su questa pagina: si tratta di copiare ed incollare il codice ivi presente (occhio a selezionare il codice per Sublime Text 3) nella console di Sublime Text attivabile con View -> Show Console.

Riavviate l'editor e provate a digitare ctrl + shift + p inserendo la parola package, o parte di essa, nella combo di ricerca: se avete eseguito correttamente la procedura precedente, dovreste avere a disposizione una serie di comandi aggiuntivi per, ad esempio, installare un nuovo package

Vi propongo ora  una serie di package aggiuntivi molto utili.

Il primo, SublimeLinter, permette di avere un controllore sintattico per il linguaggio javascript, in modo da renderci immediatamente conto di errori di sintassi nel programma.

L'utilizzo di questo package, presuppone l'esistenza sul nostro sistema, di un modulo aggiuntivo di node.js, che si chiama, jshint, che deve essere installato a livello globale con npm: aprite una shell e digitate il seguente comando npm install -g jshint.

Ora, tramite Sublime Text, digitate ctrl + shift + p, inserite install nella combo di ricerca fino a trovate e selezionare la voce Package Controll: Install Package, dopo un paio di secondi verrà caricata una lista di package presenti nel repository centralizzato, inserite la parola SublimeLinter fino a trovare e selezionare il pacchetto SublimeLinter; come ultimo passo, ripetete la procedura per installare un secondo pacchetto che si chiama SublimeLinter-jshint.

Se ora provate a scrivere del codice js con degli errori, talli errori verranno evidenziati dal package appena installato: comodo ed efficace, in questo esempio ho definito una variabile a senza inserire il punto e virgoala, sublime linter mi indica l'errore con un pallino giallo in corrispondenza dell'istruzione e con una coppia di parentesi quadre nel punto in cui dovrebbe esserci il punto e virgola

Per cambiare lo stile dei messaggi di SublimeLinter digitate ctrl + shift + p ,cercate e selezionate il comando SublimeLinter: Choose Gunter Themes, selezionate uno qualsiasi dei temi che compariranno nella successiva lista.

Altro modulo molto utile è il modulo di git, che ci permetteràà di eseguire i comandi di git dall'interno dell'ambiente.

Con la stessa procedura, digitate ctrl + shift + p, inserite install nella combo di ricerca fino a trovate e selezionare la voce Package Controll: Install Package, dopo un paio di secondi verrà caricata una lista di package presenti nel repository centralizzato, inserite la parola Git fino a trovare e selezionare il package Git.

Riavviate l'editor e se avete letto e seguito le istruzioni di questo post, dovreste avete da qualche parte sul vostro file system la cartella passionejavascript contenente tutti gli esempi del blog : apritela in Sublime Text con il comando File -> Open Folder.

Se adesso digitate ctrl + shift + p e poi git, avete una lista di comandi git da poter eseguire a livello di cartella di progetto: selezionata git pull per aggiornare in futuro tutti file che metterò sul repository centralizzato.

Per una lista dei migliori package presenti per sublime text, vi rimando a questa pagina: se ve ne piace qualcuno, installatelo così come vi ho mostrato.

Siamo pronti ora a sviluppare seriamente con un ambiente di sviluppo snello e potente.

Alla prox.
Ivan