Come configurare Visual Studio Code

Ti avevamo già parlato di Visual Studio Code nell’ambito della nostra guida Bootstrap in Italiano.

Lo rincontriamo, in questa sede, perchè prima di addentrarsi nello sviluppo web con Symfony, è necessario completare il nostro ambiente di sviluppo con un editor di codice.
Visual Studio Code, sviluppato da Microsoft, è uno degli editor di codice multipiattaforma più popolari che offre una vasta gamma di funzionalità, tra cui il supporto a svariati linguaggi di programmazione ed una ricca collezione di estensioni che migliorano e agevolano lo sviluppo software. Vediamo come installarlo e come configurarlo.

Come Installare Visual Studio Code

Per iniziare ad utilizzare VS Code è sufficiente seguire questi semplici passaggi:

1. Visitare il sito web ufficiale: visitare il sito ufficiale di Visual Studio Code e scegliere la versione adatta al proprio sistema operativo (disponibile per Windows, Linux e macOS).
2. Scaricare l’installer: cliccare sul pulsante di download e attendere il completamento.
3. Installazione: Una volta scaricato il file, avviarlo e seguire le istruzioni fornite dall’installer. Durante il processo di installazione, è possibile scegliere di aggiungere VS Code alla variabile di sistema PATH. Questa opzione permette di avviare l’editor da riga di comando.

Terminata l’installazione, all’avvio dell’IDE VS Code si presenterà una schermata simile a quella in basso.

VS Code presenta una barra laterale sinistra che facilita l’accesso rapido a vari strumenti come l’esplora risorse per la navigazione dei file e delle cartelle, il cerca per effettuare ricerche e sostituzioni all’interno dei vari file del progetto, il controllo del codice sorgente per repository git e l’accesso al marketplace per l’installazione di nuove estensioni.
VS Code, inoltre, permette di personalizzare l’ambiente di sviluppo scegliendo tra diversi temi, layout e configurazioni. 

Come si può notare, Visual Studio Code dispone di base di una serie di funzionalità che lo rendono un potente editor di codice. Per renderlo ancora più potente è possibile aggiungere nuove funzionalità tramite le estensioni che sono presenti all’interno del suo marketplace. Nella sezione successiva, esploreremo alcune delle estensioni più utili per lo sviluppo web in Symfony.

Estensioni di Visual Studio Code per lo sviluppo in Symfony

META DESCRIPTION: Esplora le estensioni essenziali di VS Code per Symfony, migliorando la produttività e l’efficienza nello sviluppo.

Di seguito, una lista di estensioni che possono essere definite “essenziali” per uno sviluppo Symfony efficiente e produttivo. Per installare un’estensione è necessario aprire il pannello delle estensioni dalla barra laterale sinistra e digitare nella relativa barra di ricerca il nome dell’estensione desiderata. Una volta individuata, basterà premere sulla voce “Install” per installarla.

PHP Intelephense

PHP Intelephense aggiunge a VS Code una serie di funzionalità avanzate per facilitare la vita agli sviluppatori PHP, tra cui:

1. Code completion (IntelliSense): fornisce suggerimenti intelligenti per funzioni e metodi mentre viene scritto il codice mostrando la firma e, quindi, i parametri richiesti. Suggerisce automaticamente variabili e metodi basandosi sullo scope corrente del codice.
2. Go to definition: permette di saltare rapidamente alle definizioni di classi, metodi e funzioni.
3. Find references: aiuta a trovare tutti i riferimenti a una specifica classe, metodo o funzione.
4. Formattazione: fornisce strumenti per la formattazione automatica del codice, aiutando a mantenere un codice più facilmente leggibile.

Auto Close Tags

L’estensione Auto Close Tag è molto utile quando si lavora con file HTML, offrendo funzionalità come:

• Chiusura automatica dei tag: una volta inserito un tag di apertura, l’estensione inserisce automaticamente quello di chiusura, facendo risparmiare tempo e riducendo gli errori.
• Supporto per molteplici linguaggi: supporta svariati linguaggi, inclusi il linguaggio HTML, Twig e il linguaggio PHP.

Una volta installata, è necessario accedere alle impostazioni dell’estensione e modificare l’array auto-close-tag.activationOnLanguage aggiungendo “twig” e verificando la presenza di “html” e “php”. In questo modo, l’estensione si attiverà su tutti i linguaggi che useremo per sviluppare in Symfony.

PHP Namespace Resolver

Questa estensione facilita l’importazione e l’organizzazione dei namespace, offrendo funzionalità come:

• Importazione automatica: facilita l’importazione automatica dei namespace mancanti all’interno del file PHP che si sta modificando.
• Ricerca intelligente: cerca e importa i namespace corretti sulla base delle classi utilizzate all’interno del codice.
• Organizzazione dei namespace: aiuta a mantenere i file PHP ordinati organizzando i namespace in modo logico.

Twig

L’estensione Twig aggiunge un supporto avanzato per il template engine Twig in VS Code, con funzionalità come:

• Highlight della sintassi: migliora la leggibilità del codice Twig evidenziando diversi elementi sintattici con colori distinti.
• Autocompletamento: fornisce suggerimenti mentre viene scritto codice Twig, aiutando a scrivere codice più velocemente e con meno errori.
• Formattazione: aiuta a formattare il codice con strumenti automatici rendendolo più leggibile e facile da manutenere.