1 - Introduzione

Visual Studio Code (VS Code) è un editor di codice sorgente gratuito e open source sviluppato da Microsoft. È disponibile per Windows, Linux e macOS.

La pagina ufficiale per il download è: https://code.visualstudio.com

L'autore di questa guida utilizza la versione per Windows e Linux.

2 - Configurazione iniziale

2.1 - Avvio

All'avvio, VS Code mostra una finestra iniziale. Per chiudere questa finestra è sufficiente cliccare sulla "X" in alto a destra.

2.2 - Welcome

Nella schermata Welcome, posizionarsi nella parte bassa centrale e togliere la spunta alla voce "Show welcome on startup". Successivamente chiudere la schermata cliccando sulla "X".

Questa operazione impedisce che la schermata di benvenuto venga mostrata ad ogni avvio di VS Code.

3 - Modifiche alle impostazioni

3.2 - Account

Nella barra laterale sinistra, posizionare il cursore sulla voce Account ed effettuare un clic con il tasto destro del mouse. Selezionare l'opzione per disattivare la voce Account.

Questa modifica rimuove l'icona dell'account dalla barra laterale, riducendo gli elementi visivi non necessari.

3.3 - Barra di stato

Posizionarsi sulla barra di stato nella parte inferiore della finestra ed effettuare un clic con il tasto destro del mouse. Selezionare le voci da disattivare:

• Remote host
• Problems
• Copilot Status

Lasciare attiva solo la voce Notifications.

Questa configurazione pulisce la barra di stato, mostrando solo le notifiche essenziali.

3.4 - Editor

Dal menu principale selezionare View, poi Appearance, infine deselezionare la voce Minimap.

Successivamente, sempre da View > Appearance, deselezionare la voce Breadcrumbs.

La Minimap è una rappresentazione in miniatura del codice visualizzata sul lato destro dell'editor. I Breadcrumbs mostrano il percorso gerarchico del file corrente. Entrambi occupano spazio visivo che può essere recuperato.

3.5 - Terminal

Cliccare sui tre puntini nella parte superiore del pannello e selezionare Terminal > New Terminal.

Posizionare il cursore vicino alle voci del pannello, cliccare con il tasto destro del mouse e rimuovere:

• Problems
• Output
• Debug console
• Ports

Lasciare solo la voce Terminal. Successivamente chiudere il terminale cliccando sulla "X" a destra.

Questa configurazione mantiene solo il terminale integrato nel pannello inferiore, eliminando le altre schede non utilizzate.

3.6 - Explorer

Nella barra laterale sinistra, cliccare sull'icona con il foglio bianco in alto a sinistra per aprire l'Explorer.

Posizionarsi in basso dove sono presenti le voci:

• Outline
• Timeline

Effettuare un clic con il tasto destro del mouse e togliere la spunta a entrambe le voci.

L'Outline mostra la struttura del codice del file corrente. La Timeline mostra la cronologia delle modifiche del file. Queste sezioni possono essere rimosse per semplificare l'interfaccia.

3.7 - Extension

Nella sezione Extension, posizionarsi in basso ed effettuare un clic con il tasto destro del mouse. Togliere la spunta alle voci:

• MCP Servers
• Recommended

MCP Servers è una sezione relativa ai server Model Context Protocol. Recommended mostra estensioni suggerite. Rimuovendo queste voci si semplifica la vista delle estensioni.

4 - Installazione del pacchetto di lingua italiana

Cercare nella barra di ricerca delle estensioni la voce "Search Extension".

Digitare "italian" e selezionare la prima estensione che appare. Cliccare su "Install".

Il pacchetto di lingua italiana per VS Code fornisce una traduzione dell'interfaccia utente in italiano . Dopo l'installazione è necessario riavviare VS Code.

Apparirà un fumetto in basso a destra con l'opzione "Change Language and Restart". Cliccare su questa voce per applicare la lingua italiana e riavviare l'editor.

5 - Disattivare alcune preferenze

Cliccare sull'icona dell'ingranaggio in basso a sinistra con il tasto sinistro del mouse, quindi selezionare "Impostazioni".

5.1 - terminal.integrated.persistentSessionReviveProcess

Trovare questa impostazione e cambiare il valore predefinito in "never".

Questa opzione controlla se VS Code tenta di ripristinare le sessioni del terminale dopo un riavvio. Impostandola su "never" si impedisce il ripristino automatico delle sessioni terminale.

5.2 - dispatch

Trovare questa impostazione e cambiare il valore da "key" a "keycode".

Questa opzione determina come vengono interpretati i tasti di scelta rapida. Il valore "keycode" utilizza il codice fisico del tasto, offrendo un comportamento più coerente.

5.3 - restoreWindows

Trovare questa impostazione e cambiare il valore da "all" a "none".

Questa opzione controlla quali finestre vengono ripristinate all'avvio di VS Code. Impostandola su "none" non viene ripristinata automaticamente nessuna finestra .

5.4 - restoreState

Trovare questa impostazione e deselezionare la casella di controllo.

Questa opzione controlla se VS Code ripristina lo stato dell'editor (file aperti, cursori, layout) dopo un riavvio. Disattivandola si parte sempre da una sessione pulita.

5.5 - AI disable

Trovare l'impostazione relativa all'intelligenza artificiale e deselezionare la casella di controllo.

Questa opzione disattiva le funzionalità di intelligenza artificiale integrate in VS Code.

5.6 - Update Mode

Trovare questa impostazione e cambiare il valore predefinito in "none".

Questa opzione disattiva gli aggiornamenti automatici di VS Code. L'editor non scaricherà né installerà aggiornamenti in modo automatico.

Nota: dopo aver completato tutte le modifiche alle impostazioni, chiudere il programma e riaprirlo per applicare i cambiamenti.

6 - Estensioni consigliate

Confermare sempre che le sorgenti delle estensioni siano conosciute e affidabili prima di procedere all'installazione.

6.1 - Python – Microsoft

Questa estensione fornisce supporto completo per il linguaggio Python in VS Code. Include funzionalità di IntelliSense (completamento automatico del codice), linting (analisi statica per identificare errori), debugging, navigazione del codice e gestione degli ambienti virtuali .

6.2 - Minify All – Jose Gracia Berenguer

Questa estensione permette di comprimere e minificare file JavaScript, JSON, CSS e HTML direttamente in VS Code . La minificazione riduce le dimensioni dei file rimuovendo spazi, commenti e caratteri non necessari. Supporta anche la compressione in formato gzip.

6.3 - Format HTML in PHP – rifi2k

Questa estensione permette di formattare correttamente il codice HTML all'interno dei file PHP . Utilizza le impostazioni native di formattazione HTML di VS Code e funziona con la formattazione al salvataggio. È utile quando si lavora con file PHP che contengono markup HTML e JavaScript .

6.4 - PHP Formatter - pretty-php – Luke Arms

Questa estensione integra il formattatore di codice PHP chiamato pretty-php in VS Code . È un formattatore deterministico e veloce che si concentra sulla formattazione degli spazi bianchi, producendo differenze minime nel codice. Supporta PHP 8.4 e versioni precedenti, ed è compatibile con PSR-12.

7 - Aspetto grafico

7.1 - Plastic (Will Stone)

Plastic è un tema per VS Code che fornisce un aspetto con colori chiari mantenendo l'interfaccia dell'IDE . Il tema utilizza una palette di colori ridotta per evitare sovraccarico visivo. Esiste anche una variante scura del tema.

7.2 - File Icons (file-icons)

Questa estensione aggiunge icone specifiche per i diversi tipi di file nella barra laterale dell'Explorer . Le icone permettono di identificare visivamente e rapidamente il tipo di file (PHP, JavaScript, CSS, HTML, ecc.) senza dover leggere l'estensione del file.

8 - Conclusione

Questa configurazione di VS Code è orientata a un ambiente di sviluppo essenziale e pulito. Le modifiche apportate alle impostazioni riducono gli elementi visivi non necessari, disattivano funzionalità automatiche non desiderate e preparano l'editor per l'uso con PHP e Python. Le estensioni consigliate forniscono supporto linguistico e strumenti di formattazione. L'aspetto grafico scelto mantiene un'interfaccia chiara e riconoscibile.