Visual Studio Code l’editor (quasi) maturo per PHP

Recentemente ho scoperto e iniziato ad usare regolarmente un nuovo editor per sviluppare i siti basati su PHP e js/html.

Si tratta di Visual Studio Code il “recente” editor di filosofia open-source sviluppato da Microsoft.

Come molti di voi, anch’io ho usato (e uso) per anni Notepad++, un ottimo editor di testo che grazie al suo style engine e ai plugin, era diventato indispensabile per lo sviluppo su PHP e sulle parti di frontend con js/html.
Si trattava comunque di una soluzione per lo sviluppo veloce in quanto questo editor, rispetto a Eclipse oppure PHP IDE non ha tutte quelle funzioni di aiuto nella scrittura che possono rendere lo sviluppo più semplice.
Ma dopotutto Notepad++ se la cava egregiamente e con la sua potentissima funzione di search/replace anche su più file, e il comodo pannello function list, per me era lo strumento ideale per sviluppare.

In moltissimi casi lo proferivo addirittura al blasonato Dreamweaver per lo sviluppo front-end, che dopo la magnifica versione CS3, ha avuto, IMHO, un tracollo in picchiata sul fronte UX, rendendolo un editor ingombrante, pieno di funzioni, complesso, e nella pratica inutilizzabile per lo sviluppo front-end di tutti i giorni per un poweruser.

Così ho voluto testare Visual Studio Code, incuriosito da alcuni articoli letti in rete.

E’ posso dire, dopo quasi 2 mesi di utilizzo, che è fantastico, ha (tutto) quello che serve.

Un edito snello, semplice, con un bel design e con tante estensioni (addon), un mix di praticità per lo sviluppo PHP/js/html a livelli altissimi.

Dopo l’ultimo aggiornamento di maggio 2017 (1.13) ho trovato un editor (quasi) maturo, il quasi è perché manca ancora piccole cose che potrebbero renderlo l’editor definitivo.


Ovvio che sto parlando di un editor per chi come me cerca un ambiente di sviluppo completo per il codice, ma per altri aspetti essenziale.
Se le vostre esigenze sono prettamente front-end con sviluppo live su html (come fosse un CMS alla wordpress) allora dove cercare altro, e finire su Dreamweaver.

Appena scaricato Visual Studio Code o vscode (accorcio il nome così per comodità), vi accoglie un bel editor con un design essenziale, ma be studiato.

Non esiste ancora una vera gestione dei progetti (come chi usa Eclipse è abituato), si ragiona invece su folder/cartelle, in pratica il progetto è la cartella (e le sue sotto cartelle).

Si può caricare un progetto/cartella per volta, aprendo più editor si posso aprire più progetti contemporaneamente.

L’apertura dei file è interessante, se clicchi una volta sola vai in modalità preview, in pratica se non lo modifichi, quando apri un nuovo file quello aperto prima viene chiuso, un bel modo per evitare troppo cartelle aperte.

Anche  su vscode esiste l’apertura a side view, molto comoda per chi come me arriva da Notepad++. Le sideview posso essere multiple.
Questa modalità viene molto comoda quando si edita l’html e si apre a fianco il file css.

L’editor riconosce già di base tutte le classifiche tipologie di file di codice js/html/php/css/coffeescript/typescript/… e anche altri tipi per noi utenti hardcore come Grunt/Handlebar/Markdown/… (e cosa voliamo di più?)

Il supporto git è già incluso e integrato nell’interfaccia, permettendo così una gestione semplice dei nostri progetti.

L’editor è velocemente configurabile, si può cambiare tema e soprattutto modificare quegli aspetti su cui ogni programmatore è veramente fissato, la gestione dei tab e la lunghezza dei tab. (io uso sempre 2/spazi contro  i 4/tab che spesso trovo di default)

Con l’ultimo aggiornamento (1.13) sono state integrate in nativo le guide sull’indentatura, come avviene su Notepad++, questo aspetto grafico aiuta tantissimo nello sviluppo di php/js.

Ci sono tantissimi aspetti che mi hanno fatto apprezzare l’editor di vscode, ma diventa difficile raccontarli tutti e soprattutto noioso, per questo vi racconto ancora solo di questa cosa in particolare, che per me è una killer-app.
Quando si programma si naviga spesso tra i file e si passa da una riga all’altra (distanti) in file molto lunghi, grazie a due shortcut da tastiera, è possibile torna indietro e poi tornare avanti sulla navigazione fatta all’interno dei file, un po’ come avviene sui browser.
Le combinazioni sono ALT + sinistra e ALT  + destra, molto comode, anche perché su vscode per ora mancano i bookmark (esistono delle estensioni).

Per chi sviluppa HTML,  vscode ha già molto di quello che serve, suggerimenti sulla chiusura dei tag e il suggerimento degli attributi, e con l’uso di alcune estensioni l’esperienza sarà ancora più soddisfacente (ne parlo più avanti).

Una delle caratteriste più strabilianti è l’integrazione nativa emmet.
Per chi come me sviluppa con bootstrap (ma anche in altri casi), sa quanto è noioso (e rischioso per gli errori sempre in agguato), aprire/chiudere tanti div per creare righe e colonne.
Tramite gli shortcut in emmet diventa tutto più facile e veloce, se non lo conoscete, vi consiglio di dargli un occhio: https://docs.emmet.io/abbreviations/

Un esempio, ecco come creare facilmente un div con 2 colonne per bootstrap:

div.container>div.row>div.col-xs-6*2

La riga precedente, una volta scritta e premuto tab (per attivare emmet) genera questo codice:

<div class="container">
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

Notevole, non trovate?

Una cosa fondamentale a tutti i editor è la possibilità di caricare plugin o estensioni.
vscode ha un numero di estensioni molto alto, praticamente tutto quello che può servire a un poweruser è già stato scritto e lo si può trovare all’interno del marketplace.

L’installazione delle estensioni è semplice si fa facilmente all’interno dell’editor.

Per chi come me sviluppa PHP e front-end è indispensabile installare alcune estensioni che daranno a vscode tutte le funzioni necessarie.

Prima fra tutte l’estensione PHP Debug ti permetterà di effettuare il debugging locale o remoto tramite XDebug.
La configurazione è abbastanza semplice per chi conosce come funziona XDebug.
L’unica accortezza, se si fa debug remoto, è quella di impostare sempre i percorsi locali e remoti dei file, in caso contrario il debugging è molto probabile che non funzioni.

Altre estensioni must-have sono:

  • [PHP] Intelephense che permette di avere i suggerimenti sugli oggetti, non aspettativi miracoli, siamo ancora agli albori e molto di dipende dal vostro tipo di scrittura delle classi e delle modalità di inclusione, ci sono altre estensioni simili il mio consiglio è di provarle un po’ tutte in modo da testare quale è più compatibile con i vostri sorgenti.
  • Composer, che permette di eseguire composer all’interno dell’editor di vscode (se vi serve composer, ovvio).
  • PHP, Perl, ASM, Bash Code Format, aiuta a tener formattato meglio il codice, ha qualche piccolo difetto, ma nel complesso funziona bene.

Per quanto riguarda lo sviluppo front-end queste sono le estensioni che assolutamente dove avere:

  • Path Intellisense, se sviluppate html e css a mano come me, la fatica più grande è inserire i percorsi, questa estensioni vi suggerisce i percorsi e i file (ogni tanto i suggerimenti non arrivano, ma nel complesso da una grande mano)
  • IntelliSense for CSS class names, questa serve a suggerire i nomi delle classi quando scrivete html, vengono analizzati i file CSS che sono inclusi nelle pagine.

 

Esistono tante altre estensioni le potete trovare nel marketplace navigando dall’editor oppure qui: https://marketplace.visualstudio.com/vscode

Tra le tante, c’è l’integrazione con Docker, Angular, Python, React, Laravel, Ruby e Cordova.

Oltre allo sviluppo, in questi anni se è sempre più affermato l’utilizzo di task con Grunt, Gusp, …
In VSC c’è un’alta integrazione con questi strumenti, permettendoti di utilizzarli facilmente senza dover uscire in console per la compilazione.

In pratica per lanciare un task per uglify oppure compilare in cordova lo farai semplicemente all’interno dell’editor, e potrai anche configurare i task in modo si attivino ad ogni salvataggio.

A proposito di console, pregevole l’integrazione all’interno dell’editor del terminale in powershell che permette di effettuare le operazioni manuali sui file in modo veloce e pratico.

Ok tutto bello, ma perché “quasi” maturo.

Tutto bello e comodo, ma purtroppo manca ancora qualcosa che per me è fondamentale.

Oltre alla formattazione del codice PHP che dovrebbe venir implementata nativa e configurabile, chi programma sa che non si tratta solo di una funzione estetica ma molto utile per individuare i problemi nel flusso.

Per quanto riguarda PHP, ripiango il comodo pannello function list.
vscode per ora implementa un curioso menu a tendina symbol list, attivabile tramite una lunga combinazione di tasti CTRL+SHIFT+O, che visualizza in modo flat l’elenco delle variabili e delle funzioni.
Utile per file piccoli, ma un incubo già per delle classi un po’ corpose.

Ci vorrebbe una bella object list a treeview (esiste un plugin ma ancora con elenco flat), un po’ simile alla function list presente su Notepad++.
La richiesta è presente su github (come feature-request sul codice) da diverso tempo, per ora non si sa se verrà implementata.

Piccola nota sulla novità dell’ultimo aggiornamento dove viene abilitata la minimap del codice, funzione simpatica, ma di utilità relativa in quanto per le dimensioni minuscole del testo non è sempre facile individuare dove si trova la parte di codice che si vuole modificare.

In definitiva, oggi Microsoft, che da qualche anno (con l’arrivo di Edge) ha aperto all’opensource (su alcuni progetti) e ascolta seriamente ciò che i programmatori dicono, ha messo in the wild un editor molto potente, comodo e pratico per lo sviluppo.
Da provare sia per chi sviluppa su PHP, Js/NodeJs, e frontend, dopotutto ai giorni nostri è difficile che uno sviluppatore si fossilizzi solo su uno di questi aspetti.

Altamente consigliato, MS ha fatto anche una scelta tattica vincente, Visual Studio Code è disponibile non solo su Windows ma anche su Mac (che molti programmatori js preferiscono usare) e Linux (veri poweruser).
Insomma non avete scuse perché è disponibile per ogni configurazione, inoltre il codice è su github, con una community  molto attiva e rilasci di fix e funzionalità aggiunte periodiche.

 

Reply