Inizio

Introduzione

Cos'è Visual Studio Code (VS Code)? Visual Studio Code è un editor di codice sorgente leggero ma potente, sviluppato da Microsoft. È open-source e supporta nativamente JavaScript, TypeScript e Node.js, ma grazie alle estensioni può essere utilizzato per quasi tutti i linguaggi di programmazione (Python, C++, PHP, Java, ecc.). Offre funzionalità avanzate come il debug integrato, il controllo Git, l'evidenziazione della sintassi intelligente e l'auto-completamento del codice.

Dove si scarica? Il sito ufficiale per il download è: https://code.visualstudio.com

Disponibilità: Il software è disponibile per i principali sistemi operativi:

Windows
Linux
macOS

Nota: In questa guida ci si riferisce all'utilizzo sulle versioni per Windows e Linux.

0 - Installazione e configurazione iniziale

0.0 - Installazione

Scaricare l'installer dal sito ufficiale https://code.visualstudio.com e procedere con l'installazione standard per il proprio sistema operativo.

0.1 - Avvio e primo setup

Al primo avvio del programma:

Nella finestra di benvenuto, cliccare su "Continue without Signing in" (Continua senza accedere) situato in basso a destra. Non è necessario creare o usare un account Microsoft per usare l'editor.
Cliccare nuovamente su "Continue" in basso a destra per procedere senza variare l'aspetto grafico predefinito in questa fase.
Alla comparsa della terza scheda introduttiva, chiuderla normalmente cliccando sulla "X" in alto a destra.
Nella parte bassa centrale della finestra, togliere la spunta alla voce "Show welcome on startup" (Mostra pagina di benvenuto all'avvio) per evitare che riappaia ad ogni apertura.
Chiudere la scheda residua con la "X".

1 - Modifiche alle impostazioni dell'interfaccia

L'obiettivo di questa sezione è pulire l'interfaccia dagli elementi superflui per massimizzare lo spazio di lavoro e ridurre le distrazioni.

1.1 - Barra laterale sinistra (Activity Bar)

La barra verticale più a sinistra contiene le icone principali per navigare tra le diverse funzionalità (Explorer, Search, Source Control, etc.).

Azione: Posizionare il mouse sulla barra, cliccare con il tasto destro e disattivare la voce: * Account

Spiegazione: Disattivando "Account", si rimuove l'icona del profilo utente dalla barra laterale. Poiché abbiamo scelto di non fare il login, questa icona è inutile e occupa spazio visivo.

1.2 - Barra di stato (Status Bar)

La barra orizzontale in fondo alla finestra mostra informazioni rapide sullo stato corrente dell'editor (branch git, errori, notifiche, ecc.).

Azione: Cliccare con il tasto destro sulla barra di stato e disattivare le seguenti voci: * Remote host * Problems * Copilot Status (Nota: Questa voce è presente solo su Windows; su Linux non appare)
Lasciare attivo solo: * Notifications

Spiegazione: La barra di stato può diventare molto affollata. Rimuovendo "Remote host" e "Problems" si pulisce la vista inferiore. Le notifiche sono lasciate attive perché importanti per ricevere avvisi dal sistema o dalle estensioni.

1.3 - Editor (Area di scrittura del codice)

Modifiche visive direttamente nell'area dove si scrive il codice.

Andare nel menu in alto: View > Appearance (Visualizza > Aspetto).
Deselezionare Minimap.

Spiegazione: La Minimap è quella striscia verticale a destra dell'editor che mostra una versione rimpicciolita di tutto il codice. Disattivarla recupera spazio orizzontale prezioso, specialmente su monitor non ultra-wide, e riduce il carico grafico.

Sempre nel menu View > Appearance, deselezionare Breadcrumbs.

Spiegazione: I Breadcrumbs sono la barra di navigazione in cima al file che mostra il percorso gerarchico (es. Classe > Metodo > Variabile). Disattivarli rende l'intestazione del file più pulita e minimalista.

1.4 - Terminal (Terminale integrato)

VS Code ha un terminale integrato utile per lanciare comandi senza uscire dall'editor.

Aprire il terminale cliccando sui tre pallini in alto o tramite menu: Terminal > New Terminal.
Posizionare il mouse vicino alle schede/titoli dei pannelli inferiori (dove appaiono le voci Problems, Output, etc.).
Cliccare con il tasto destro e rimuovere/deselezionare:

Problems
Output
Debug Console
Ports

Lasciare selezionato solo Terminal.
Chiudere il pannello del terminale cliccando sulla "X" a destra.

Spiegazione: Di default, VS Code raggruppa diversi pannelli di output sotto il terminale. Rimuovendo gli altri, ci si assicura che quando si apre il pannello inferiore appaia solo la console dei comandi, evitando confusione con log di debug o elenchi di errori.

1.5 - Explorer (Esplora risorse)

L'Explorer è il pannello principale a sinistra che mostra i file del progetto.

Cliccare sull'icona con il foglio bianco in alto a sinistra per aprire l'Explorer.
Scorrere fino in fondo al pannello dell'Explorer.
Trovare le sezioni:

Outline
Timeline

Cliccare con il tasto destro su ciascuna e togliere la spunta per nasconderle.

Spiegazione: "Outline" mostra la struttura simbolica del file aperto (funzioni, classi), mentre "Timeline" mostra la cronologia locale delle modifiche. Nascondendoli si mantiene l'elenco dei file più compatto e leggibile.

1.6 - Extensions (Estensioni)

Nel pannello delle estensioni (icona dei quadratini a sinistra):

Scorri fino in fondo al pannello.
Con il tasto destro, disattivare/nascondere:

MCP Servers
Recommended

Spiegazione: Queste sezioni mostrano suggerimenti automatici di estensioni o server. Disattivarli evita che l'interfaccia proponga costantemente contenuti non richiesti, mantenendo il focus sulle estensioni che abbiamo installato volontariamente.

2 - Installazione del pacchetto di lingua italiana

Per tradurre l'interfaccia di VS Code in italiano:

Aprire il pannello Extensions (icona dei quadratini a sinistra).
Nella barra di ricerca in alto (Search Extensions), scrivere: italian.
Selezionare la prima estensione trovata: "Italian Language Pack for Visual Studio Code" (di Microsoft).
Cliccare su Install.
Attendere il completamento. Apparirà un fumetto/notification in basso a destra.
Cliccare sul pulsante "Change Language and Restart".

Nota: Il programma si chiuderà e si riaprirà automaticamente con l'interfaccia in italiano.

3 - Preferenze e Impostazioni Avanzate

Accedere alle impostazioni:

Cliccare sull'icona dell'Ingranaggio in basso a sinistra.
Selezionare Impostazioni (Settings).

Nella barra di ricerca delle impostazioni, cercare e modificare le seguenti voci:

3.1 - terminal.integrated.persistentSessionReviveProcess

Cercare: terminal.integrated.persistentSessionReviveProcess
Cambiare il valore da default a: never

Spiegazione: Impedisce a VS Code di tentare di ripristinare sessioni di terminale precedenti che potrebbero essere rimaste appese o incomplete dopo una chiusura improvvisa, garantendo un terminale pulito ad ogni avvio.

3.2 - dispatch

Cercare: keyboard.dispatch
Cambiare il valore da key a: keyCode

Spiegazione: Questa impostazione cambia il modo in cui VS Code interpreta gli input della tastiera. Usare keyCode può risolvere problemi di mappatura dei tasti speciali o combinazioni di tasti su alcune configurazioni di sistema operativo o layout di tastiera.

3.3 - restoreWindows

Cercare: window.restoreWindows
Cambiare il valore da all a: none

Spiegazione: Di default, VS Code riapre tutte le finestre e i file lasciati aperti alla chiusura precedente. Impostando su none, il programma si avvierà sempre "pulito", senza ricaricare vecchi progetti. Questo è utile per mantenere un ambiente di lavoro ordinato e partire da zero ogni volta.

3.4 - restoreState

Cercare: workbench.editor.restoreViewState (o simile voce relativa al ripristino dello stato)
Deselezionare la checkbox.

Spiegazione: Disabilita il salvataggio dello stato di scorrimento o della posizione del cursore nei file chiusi, contribuendo ulteriormente a un avvio "fresco" dell'editor.

3.5 - AI disable (Disabilitazione funzionalità AI)

Cercare impostazioni relative ad AI o Copilot (se presenti nelle impostazioni generali o estensioni).
Deselezionare eventuali spunte relative all'attivazione automatica di suggerimenti AI o telemetria legata all'intelligenza artificiale.

Spiegazione: Disattiva i servizi di intelligenza artificiale integrati o suggeriti, migliorando la privacy e riducendo il consumo di risorse se non si intende utilizzare assistenti di codifica AI.

3.6 - Update Mode (Modalità Aggiornamento)

Cercare: update.mode
Cambiare il valore da default a: none

Spiegazione: Disattiva gli aggiornamenti automatici in background. VS Code non scaricherà né installerà nuove versioni da solo. Gli aggiornamenti dovranno essere gestiti manualmente dall'utente quando lo si ritiene opportuno, evitando interruzioni improvvise o cambiamenti indesiderati nell'interfaccia.

4 - Riavvio Finale

Azione: Chiudere completamente Visual Studio Code e riaprirlo.

Spiegazione: Un riavvio completo assicura che tutte le modifiche alle impostazioni profonde (come quelle del terminale, della lingua e degli aggiornamenti) vengano applicate correttamente e che l'interfaccia sia stabile e pulita come configurato.

5 - Installazione Estensioni Essenziali

Andare nel pannello Estensioni e installare le seguenti.

Importante: Confermare sempre l'installazione solo da sorgenti conosciute e verificati (preferibilmente editori ufficiali o sviluppatori con alta reputazione).

5.1 - Python – Microsoft

Cos'è: L'estensione ufficiale di Microsoft per il supporto al linguaggio Python.
Spiegazione: Fornisce evidenziazione della sintassi, auto-completamento intelligente (IntelliSense), linting (controllo errori), debugging e supporto per Jupyter Notebooks. È fondamentale per chiunque sviluppi in Python.

5.2 - Minify All – Jose Gracia Berenguer

Cos'è: Uno strumento per comprimere (minificare) file CSS, JavaScript e HTML.
Spiegazione: La minificazione rimuove spazi bianchi, commenti e caratteri inutili dai file di codice web per ridurne le dimensioni. Questo è utile per ottimizzare le prestazioni dei siti web prima del deployment in produzione.

5.3 - Format HTML in PHP – rifi2k

Cos'è: Un'estensione specifica per formattare correttamente il codice HTML annidato all'interno di file PHP.
Spiegazione: Spesso i formatter standard faticano a gestire la miscela di tag PHP (<?php ... ?>) e HTML. Questa estensione assicura che l'indentazione e la struttura HTML rimangano leggibili e corrette anche quando inserite in script PHP.

5.4 - PHP Formatter - pretty-php – Luke Arms

Cos'è: Un formatter dedicato esclusivamente al codice PHP.
Spiegazione: Applica uno stile di codifica coerente al codice PHP, correggendo indentazione, spaziature e struttura. Aiuta a mantenere il codice PHP pulito, leggibile e conforme agli standard, facilitando la manutenzione e la collaborazione in team.

6 - Aspetto Grafico (Temi e Icone)

Personalizzazione visiva per migliorare l'esperienza utente.

6.1 - Plastic (Will Stone)

Cos'è: Un tema colore per l'interfaccia di VS Code.
Spiegazione: Questo tema offre una palette di colori scuri ma "chiari" (non nero assoluto), con toni morbidi e contrasti bilanciati. Riduce l'affaticamento visivo durante lunghe sessioni di coding rispetto ai temi ad alto contrasto nero/bianco, mantenendo un aspetto moderno ed elegante.

6.2 - File Icons (file-icons)

Cos'è: Un pacchetto di icone personalizzate per i file nell'Explorer.
Spiegazione: Sostituisce le icone generiche dei file con icone specifiche e colorate in base all'estensione del file (es. icona Python blu/gialla, icona PHP viola, icona HTML arancione). Questo permette di identificare visivamente e rapidamente il tipo di file nella lista del progetto senza dover leggere l'estensione.

7 - Conclusione

Seguendo questi passaggi, Visual Studio Code è stato trasformato da un editor generico a un ambiente di sviluppo personalizzato, pulito e ottimizzato per lavorare con Python e PHP. L'interfaccia è stata semplificata rimuovendo le distrazioni, la lingua è stata impostata in italiano per facilità d'uso, e sono state aggiunte le estensioni chiave per la produttività. Il risultato è un editor leggero, veloce e adatto alle esigenze specifiche dello sviluppatore.