VS Code essenziale

VS Code domina lo sviluppo web per due ragioni che si rafforzano a vicenda: parte veloce e cresce solo quanto serve. Gli strumenti nativi — ricerca, terminale, debug, Git — coprono l'intero ciclo di vita del codice, e tutto il resto si aggiunge per estensione. Capire come ci riesce non è cultura generale: ti servirà più avanti, quando dovrai decidere cosa installare e cosa no.

Sotto il cofano: tre scelte architetturali

Rilasciato da Microsoft nel 2015 come progetto open source Code - OSS (da cui derivano anche build alternative come VSCodium), l'editor si regge su tre scelte precise:

• Electron: combina il motore di rendering Chromium e il runtime Node.js. È il motivo per cui l'interfaccia è personalizzabile fino all'ultimo pixel (è fatta di HTML, CSS e JavaScript) pur avendo accesso diretto al file system e ai processi del sistema.
• Monaco Editor: il motore di editing testuale, ottimizzato per aprire file enormi e colorare la sintassi in tempo reale senza esitazioni. È lo stesso componente che ritrovi negli editor embedded di GitHub e di molti servizi web.
• Extension Host: la scelta più importante. Tutte le estensioni girano in un processo separato dall'interfaccia: se un'estensione si blocca o macina calcoli pesanti, l'editor resta fluido. È questo isolamento a permettere un marketplace sterminato senza che ogni installazione sia una scommessa sulla stabilità.

Editor evoluto o IDE completo? Capire la differenza per non sbagliare approccio

Spesso si definisce VS Code come un "IDE" (Integrated Development Environment), ma la realtà è diversa. Capire questa differenza ti aiuterà ad usarlo nel modo giusto, senza sovraccaricarlo.

Pensa alla differenza tra un camper accessoriato ed una moto da corsa personalizzabile:

• Un IDE (il camper): Strumenti come WebStorm o Visual Studio Professional nascono "con tutto dentro". Hanno già pronti il debugger, i linter, la gestione dei database e i compilatori. Sono pronti all'uso ma sono pesanti, consumano molta memoria e impongono un flusso di lavoro predefinito.
• VS Code (la moto da corsa): Nasce come un foglio bianco, leggero e velocissimo. Di base sa fare solo una cosa: farti scrivere codice in modo fluido. Sei tu, attraverso le estensioni e le impostazioni, a decidere cosa aggiungere sulla tua scrivania.

Perché questo dettaglio cambia il tuo modo di lavorare?

Perché in VS Code sei tu il progettista del tuo ambiente. Se installi decine di estensioni senza criterio, l'editor diventerà lento e caotico. Se invece impari a configurarlo con poche estensioni mirate e le impostazioni specifiche per ogni progetto (come vedremo nei prossimi capitoli), avrai uno strumento reattivo, cucito su misura per le tue esigenze.

Da dove scaricare VS Code in modo sicuro

Il punto di partenza ufficiale ed unico raccomandato è il sito di Microsoft: code.visualstudio.com.

Evita assolutamente portali di terze parti o installer non ufficiali. Nella pagina di download troverai i pacchetti per i tre sistemi operativi principali:

• Windows: viene offerto sia l'installer "User" (consigliato, si installa nella cartella utente senza richiedere privilegi di amministratore) sia il pacchetto "System" (per installazioni su tutto il computer).
• macOS: viene scaricato un file ZIP contenente direttamente l'applicazione. Ti basta trascinare l'icona di Visual Studio Code all'interno della cartella Applicazioni del tuo Mac per completare l'installazione.
• Linux: sono disponibili pacchetti .deb (per Debian/Ubuntu) e .rpm (per RedHat/Fedora/CentOS), oltre a pacchetti flatpak o snap.

Il primo avvio e la schermata di Benvenuto

Quando apri VS Code per la prima volta, sarai accolto da una schermata di benvenuto ("Welcome Page") che ti guiderà nei primi passi. La prima scelta che l'editor ti proporrà riguarda l'aspetto visivo (il tema di colore).

Cosa conviene fare subito:

• Scegli un tema leggibile: Puoi selezionare un tema scuro (Dark, es. *Dark Modern*) o uno chiaro (Light). Un tema scuro stanca meno gli occhi durante le sessioni prolungate.
• Chiudi la Welcome Page: Puoi togliere la spunta a "Show welcome page on startup" in basso per evitare che si riapra ogni volta. In questo modo VS Code si avvierà su una finestra vuota e pulita, pronto a lavorare.

Aprire i progetti: menu grafico o terminale?

Per aprire un progetto in VS Code, hai due strade. Scegli quella che si adatta meglio al tuo modo di lavorare:

1. La via grafica (Classica): Apri VS Code cliccando sulla sua icona di sistema, fai clic su File -> Apri cartella (o Open Folder) e selezioni la cartella del tuo progetto cercandola nelle cartelle del tuo computer. Questo metodo funziona benissimo, è intuitivo e non richiede l'uso del terminale.
2. La via da terminale (Ottimizzata): Digiti il comando code . nel terminale per lanciare l'editor direttamente all'interno della cartella in cui ti trovi.

Che cosa significa esattamente il comando code .?

Se decidi di usare la via da terminale, il comando da scrivere è composto da due parti separate da uno spazio:

• code: è il comando che richiama l'eseguibile di Visual Studio Code.
• . (il punto): nei sistemi operativi (come macOS, Windows e Linux) rappresenta la cartella corrente, ovvero la cartella in cui ti trovi in quel momento all'interno del terminale.

In sintesi, digitare code . dice al computer: "Apri VS Code impostando come spazio di lavoro attivo la cartella esatta in cui mi trovo adesso nel terminale".

Quando e perché questo comando diventa incredibilmente utile? (Esempi Pratici)

Se non hai mai usato il terminale, questo comando può sembrarti un'inutile complicazione. Diventa però fondamentale in queste due circostanze tipiche del flusso di lavoro di uno sviluppatore:

• Scenario 1: Quando scarichi un progetto da internet (Git clone)
  Immagina di voler lavorare su un progetto open source esistente. Apri il terminale del tuo computer e digiti git clone https://github.com/esempio/progetto.git per scaricarlo. Successivamente, digiti cd progetto per entrare all'interno della cartella appena scaricata.
  A questo punto sei già lì con il terminale. Invece di staccare le mani dalla tastiera, prendere il mouse, cercare l'icona di VS Code, aprirlo, fare clic su File, selezionare Apri, navigare tra le cartelle per ritrovare il progetto scaricato e cliccare su OK... digiti semplicemente code . e l'editor si apre istantaneamente sulla cartella corretta. Risparmi tempo ed eviti distrazioni.
• Scenario 2: Quando lavori su progetti con cartelle annidate (Monorepo o Sottocartelle)
  Molti progetti moderni hanno una struttura a sottocartelle (es. una cartella principale che contiene una cartella /frontend e una /backend). Se usi l'interfaccia grafica per aprirli, potresti confonderti e aprire la cartella principale gigante rallentando l'editor. Se invece usi il terminale per entrare esattamente dentro /frontend (con il comando cd frontend) e digiti code ., aprirai solo la porzione di codice su cui devi lavorare, con la certezza di non sbagliare directory.

Nota bene: Se per ora preferisci non usare il terminale, puoi saltare tranquillamente l'abilitazione di questo comando. Potrai sempre configurarlo in un secondo momento se e quando ne sentirai la reale utilità nel tuo flusso di lavoro quotidiano.

Come abilitare il comando sul tuo sistema (Opzionale):

• macOS: Apri VS Code normalmente. Premi Cmd + Shift + P per aprire la Command Palette, digita Shell Command e seleziona la voce Shell Command: Install 'code' command in PATH. Ora chiudi e riapri il terminale di sistema per applicare la modifica.
• Windows / Linux: Il comando viene configurato automaticamente durante l'installazione di VS Code. Assicurati solo, durante i passaggi dell'installatore, di non aver deselezionato la casella "Aggiungi al PATH" (Add to PATH).

User Settings e Workspace Settings: chi decide cosa?

Quando usi VS Code, puoi personalizzare qualunque dettaglio dell'interfaccia o del funzionamento: dalla dimensione del testo al colore di sfondo, fino a regole rigide su come il codice deve essere formattato. Questa personalizzazione avviene tramite le Impostazioni (Settings).

Per evitare di fare confusione, VS Code ti permette di applicare le preferenze su due livelli logici differenti:

• 1. User Settings (Impostazioni Utente - Globali):
  Sono le tue preferenze personali legate al tuo account sul computer. Si applicano a qualsiasi file o cartella che aprirai in VS Code. Qui devi inserire le preferenze legate al tuo comfort visivo e alle tue abitudini personali.
  Esempi tipici: la scelta del tema scuro o chiaro, la dimensione del carattere del testo (es. 16px), la famiglia di font, o la scelta di abilitare la mappa del codice laterale (Minimap).
• 2. Workspace Settings (Impostazioni dello Spazio di Lavoro - Locali):
  Si applicano esclusivamente alla cartella del progetto corrente. Queste impostazioni vengono lette da un file chiamato settings.json situato all'interno di una cartella speciale chiamata .vscode nella radice del tuo progetto. Questo file non viene creato all'avvio: esiste solo se decidi tu (o il tuo team) di crearlo ed inserire regole specifiche per quel progetto.
  Esempi tipici: l'uso obbligatorio di 2 spazi per i rientri (indentazione), l'attivazione della formattazione automatica al salvataggio o configurazioni specifiche per i linter.

Perché questa distinzione è di vitale importanza?

Immagina di collaborare con un collega su uno stesso sito web. Tu preferisci vedere il codice scritto molto grande (font size 18px) ed usare un tema blu scuro, mentre il tuo collega ha un monitor enorme e preferisce caratteri piccoli (font size 12px) e un tema grigio chiaro. Queste sono preferenze personali e vanno impostate nei vostri rispettivi User Settings, in modo che ognuno lavori comodamente.

Tuttavia, il codice del sito deve essere scritto seguendo le stesse identiche regole per entrambi (ad esempio, indentato sempre a 2 spazi e formattato automaticamente da Prettier al salvataggio), altrimenti ogni volta che uno dei due fa un commit modificherà involontariamente la formattazione dell'altro, creando conflitti ingovernabili in Git. Queste regole di formattazione del codice vanno quindi salvate nei Workspace Settings del progetto.

In caso di conflitto, chi vince?

VS Code applica sempre una regola di prossimità: le impostazioni locali del progetto (Workspace Settings) prevalgono sempre sulle tue impostazioni globali (User Settings).

Se nei tuoi User Settings personali hai configurato un'indentazione di 4 spazi, ma apri un progetto in cui il team ha stabilito nei Workspace Settings di usare 2 spazi, VS Code userà automaticamente 2 spazi solo all'interno di quel progetto, per poi tornare a 4 quando aprirai un file sfuso o un altro progetto personale. Questo garantisce che le regole del codice vengano sempre rispettate senza costringerti a cambiare manualmente le tue preferenze ogni volta.

Dove si trova questo file e come crearlo (se non c'è)

Dato che il file delle impostazioni del progetto (Workspace Settings) non viene generato in automatico all'inizio, è normale che tu non trova alcuna cartella chiamata .vscode quando crei o cloni un nuovo progetto. Hai due modi per crearla:

• Metodo 1: Tramite l'interfaccia grafica (Automatico)
  Se apri le impostazioni grafiche di VS Code (premendo Ctrl + , o Cmd + , su Mac), noterai in alto due schede: User e Workspace. Clicca sulla scheda Workspace e modifica una qualsiasi impostazione (ad esempio la dimensione del font). In quell'istante, VS Code creerà automaticamente all'interno del tuo progetto la cartella .vscode e il file settings.json contenente la tua modifica.
• Metodo 2: Creazione manuale (Consigliato per i programmatori)
  Puoi creare la cartella e il file direttamente dal tuo editor in pochi secondi:
  1. Fai clic destro in un punto vuoto all'interno dell'Explorer laterale di VS Code (la barra dei file del progetto) e seleziona Nuova cartella (New Folder). Chiamala esattamente .vscode (con il punto iniziale).
  2. Fai clic destro sulla cartella .vscode appena creata, seleziona Nuovo file (New File) e nominalo settings.json.
  3. Copia il blocco di codice che trovi nel paragrafo successivo e incollalo all'interno del file.

E dove trovo invece le impostazioni globali (User Settings)?

Se vuoi vedere o modificare il file di impostazioni globali (User Settings) in formato testo (JSON), non devi cercarlo nelle cartelle del tuo progetto. Puoi aprirlo direttamente da VS Code in questo modo:

• Apri la Command Palette (premi Ctrl + Shift + P o Cmd + Shift + P su Mac).
• Digita Preferences: Open User Settings (JSON) e premi Invio.
• VS Code aprirà il file JSON globale memorizzato nelle cartelle di sistema del tuo computer (ad esempio in ~/.config/Code/User/settings.json su Linux o in %APPDATA%\Code\User\settings.json su Windows).

Un file `.vscode/settings.json` pronto all'uso

Questo è un punto di partenza collaudato per un progetto web. Copialo e incollalo nel file settings.json dentro la cartella .vscode che hai appena creato:

{
  // Impostazioni dell'editor
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  
  // Formattazione automatica al salvataggio
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // Esegui correzioni linting automatiche salvando
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  
  // Interfaccia pulita e produttiva
  "editor.minimap.enabled": false,
  "editor.stickyScroll.enabled": true,
  "editor.wordWrap": "on",
  
  // Escludi file ridondanti dalla ricerca globale
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true
  }
}

Cosa fanno esattamente queste impostazioni? (Spiegazione dettagliata)

Copiare questo file all'interno del progetto è comodo, ma capire il significato di ciascuna chiave ti eviterà molti mal di testa. Ecco come funzionano le regole principali che abbiamo inserito:

• "editor.tabSize": 2 e "editor.insertSpaces": true:
  Impostano la larghezza del rientro (indentazione) a 2 spazi ed evitano di usare il tasto Tabulatore puro (Tab). In questo modo, premendo Tab verranno inseriti due caratteri di spazio reale. Questo garantisce che la formattazione rimanga ordinata e identica su qualunque computer venga visualizzato il codice.
• "editor.detectIndentation": false:
  Per impostazione predefinita, VS Code cerca di "indovinare" l'indentazione leggendo l'ultimo file che hai aperto. Questo comportamento automatico è rischioso: se incolli del codice copiato da internet che usa formati diversi, VS Code potrebbe cambiare improvvisamente le regole di tutto il progetto. Impostando questo valore su false, costringi l'editor a rispettare sempre la regola dei 2 spazi che hai deciso tu.
• "editor.formatOnSave": true:
  Attiva la formattazione automatica. Ogni volta che salverai un file (es. premendo Ctrl + S o Cmd + S), l'editor riordinerà il codice da solo, correggendo gli spazi superflui e le righe storte.
• "editor.defaultFormatter": "esbenp.prettier-vscode":
  Stabilisce che lo strumento incaricato di formattare il codice deve essere Prettier (una delle estensioni più diffuse ed efficaci, di cui parleremo nei prossimi capitoli).
• "editor.codeActionsOnSave":
  Dice a VS Code di eseguire delle azioni correttive automatiche al salvataggio. In questo caso, rileva le regole del linter (ESLint) ed esegue da solo le correzioni di sintassi minori senza farti perdere tempo.
• "editor.stickyScroll.enabled": true:
  È una delle funzioni visive più utili: tiene fisse in alto le righe che definiscono la classe o il tag HTML dentro cui ti trovi mentre scorri la pagina verso il basso. Quando lavori in un file molto lungo, ti permette di capire all'istante in quale sezione ti trovi senza dover scorrere continuamente verso l'alto per leggerlo.
• "editor.minimap.enabled": false:
  Disabilita la mappa in miniatura del codice sul lato destro dello schermo. Nello sviluppo web moderno questa mappa è spesso superflua e toglie solo spazio prezioso alla visualizzazione del testo.
• "files.exclude":
  Nasconde dalla barra laterale di VS Code (Explorer) le cartelle di servizio che non devi mai modificare manualmente (come node_modules, le cartelle compilate come dist, o file nascosti del sistema come .git e .DS_Store). Questo ti consente di concentrarti solo sui tuoi file sorgenti, mantenendo pulito lo schermo.

Lavorare con le cartelle (e non con file singoli)

Quando usi VS Code, non dovresti mai aprire un singolo file isolato (come faresti con il Blocco Note). La regola d'oro è aprire sempre l'intera cartella del tuo progetto.

Perché questo fa una differenza enorme?

• Se apri solo un file singolo, VS Code non ha idea di dove si trovi nel tuo computer. Non può aiutarti a trovare le altre pagine del sito, non sa quali regole di formattazione usare e non rileva gli errori negli altri file. Diventa solo un visualizzatore di testo colorato.
• Se apri la cartella del progetto, VS Code si attiva al massimo delle sue potenzialità: indicizza tutti i file consentendoti di cercare una parola in tutto il progetto in un millesimo di secondo, attiva i controlli automatici degli errori e si collega a Git per mostrarti quali file hai modificato.

Consigliare le estensioni giuste: il file `extensions.json`

Quando lavori in gruppo con altre persone (o quando riapri un tuo vecchio progetto dopo mesi), è importante che tutti usino le stesse estensioni di VS Code (ad esempio Prettier per tenere ordinato il codice).

Invece di scrivere una lista di estensioni su un foglio di testo sperando che gli altri le installino manualemente, puoi creare un file speciale dentro la cartella .vscode chiamato extensions.json.

Al suo interno inserisci questo semplice testo:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "usernamehw.errorlens"
  ]
}

Da quel momento, quando un altro programmatore aprirà la cartella del progetto, VS Code leggerà questo file e gli mostrerà un piccolo avviso in basso a destra: "Questo progetto raccomanda alcune estensioni. Vuoi installarle?". Con un solo clic, installerà tutto ciò che serve, senza perdite di tempo.

Workspace: lavorare su più cartelle contemporaneamente

A volte un progetto è diviso in più cartelle separate. Ad esempio, potresti avere una cartella chiamata /sito-web per la parte pubblica e una chiamata /database per la parte dei dati di backend.

Aprire la cartella principale gigante che le contiene entrambe rischia di appesantire lo schermo con file inutili. Per risolvere questo problema, VS Code ti permette di salvare uno Spazio di lavoro (Workspace) personalizzato, che raggruppa solo le cartelle su cui vuoi lavorare davvero, mostrandole affiancate nella barra laterale.

Questo viene fatto tramite un piccolo file di testo con estensione .code-workspace che ha questa struttura:

{
  "folders": [
    {
      "name": "Sito Web Frontend",
      "path": "./sito-web"
    },
    {
      "name": "Database Backend",
      "path": "./database"
    }
  ],
  "settings": {
    "editor.tabSize": 2
  }
}

Per avviare il tuo spazio di lavoro, ti basterà fare doppio clic sul file .code-workspace. Se per ora lavori da solo su progetti semplici a cartella singola non ne avrai bisogno, ma è importante sapere che esiste questa possibilità per quando i tuoi progetti diventeranno più complessi.

La Command Palette e la barra Quick Open: due strumenti in uno

Muoversi alla velocità di un professionista in VS Code significa una cosa sola: usare il mouse il meno possibile e tenere le mani sulla tastiera. Per farlo, VS Code mette a disposizione due strumenti che all'apparenza sembrano separati, ma che in realtà condividono la stessa identica barra di ricerca in alto sullo schermo:

• 1. Quick Open (Apertura Rapida - Ctrl + P o Cmd + P su Mac):
  Pensa a questo come a un motore di ricerca per i file del tuo progetto. Lo apri, digiti le prime lettere di un file (anche senza scrivere il nome intero o il percorso) e premi Invio per aprirlo. Evita di dover scorrere l'Explorer a sinistra per cercare i file.
• 2. Command Palette (Tavolozza dei Comandi - Ctrl + Shift + P o Cmd + Shift + P su Mac):
  Pensa a questo come a un motore di ricerca per le funzioni di VS Code. Invece di navigare nei menu grafici dell'editor per trovare un'azione (come cambiare tema, formattare la pagina o nascondere la barra laterale), la cerchi digitandola a parole. Di fatto, è la stessa barra del Quick Open, ma con il simbolo maggiore (>) inserito automaticamente all'inizio.

Come usare i prefissi di ricerca nella barra (Prefissi utili)

Premendo Ctrl + P (o Cmd + P), VS Code ti mostra l'elenco dei file del progetto. Se prima di iniziare a digitare inserisci uno di questi simboli speciali, la barra cambia modalità di ricerca.

• @ (Indice del file corrente): Elenca tutte le sezioni, i tag HTML o le funzioni JavaScript presenti solo nel file che hai aperto in quel momento sullo schermo. È utilissimo per saltare direttamente a un punto preciso. (Esempio: digiti @ seguito dal nome della funzione).
• @: (Simboli divisi per categoria): È una variante di @ che raggruppa i simboli del file per categorie (es. divide le variabili dalle funzioni o dalle classi), rendendo ancora più ordinata la ricerca nei file molto grandi.
• : (Vai alla riga nel file corrente): Digita ad esempio :150 per portare il cursore istantaneamente alla riga 150 del file aperto. È il modo più rapido per trovare la riga esatta segnalata da un errore del codice.
• # (Cerca simboli in tutto il progetto): Cerca funzioni, variabili o classi in tutti i file del progetto, anche in quelli attualmente chiusi.
• > (Passa ai Comandi - Command Palette): Trasforma la barra di ricerca file in un motore di ricerca per comandi. Ti permette di eseguire azioni dell'editor (es. >Toggle Minimap) senza usare il mouse.
• edt (Cerca tra le schede aperte): Inserendo il prefisso edt (con uno spazio), la ricerca si limiterà solo alle schede (editor) attualmente aperte in quel momento, ignorando gli altri file del progetto.
• ext (Gestione estensioni): Digitando ext seguito dal nome di uno strumento, puoi cercare e installare estensioni dal marketplace direttamente da questa barra.
• task (Avvia automazioni): Digitando task seguito da uno spazio, puoi selezionare ed eseguire uno dei task di automazione definiti nel tuo progetto (es. avviare il server locale).
• debug (Avvia sessioni di debug): Digitando debug puoi selezionare e far partire una delle configurazioni di debug salvate per analizzare i comportamenti del codice.
• ? (Guida rapida): Digitando il punto interrogativo nella barra, VS Code ti mostrerà un elenco riassuntivo e aggiornato di tutti i simboli di ricerca disponibili.

Modifiche parallele: quando e come usare i cursori multipli

Il multi-cursore ti permette di scrivere in più punti della pagina contemporaneamente, risparmiandoti la noia di modificare riga per riga. Esistono tre modi per attivarlo, ognuno adatto a una situazione specifica:

• Metodo 1: Modificare la stessa parola in più punti (Ctrl + D o Cmd + D)
  Seleziona una parola (es. una variabile o il nome di una classe HTML) e premi la scorciatoia. Ogni volta che la premi, VS Code evidenzierà la parola successiva identica a quella selezionata aggiungendo un cursore attivo. Ti permette di rinominare una parola in 5 punti diversi in 3 secondi. Se selezioni una parola per errore, puoi premere Ctrl + U (o Cmd + U) per annullare l'ultima selezione.
• Metodo 2: Scrivere in punti sparsi a piacere (Alt + Click o Option + Click)
  Tieni premuto il tasto Alt ed effettua un clic con il mouse in tutti i punti in cui vuoi scrivere. È ideale per fare modifiche parallele su righe diverse in cui le parole non sono identiche.
• Metodo 3: Selezione verticale a colonna (Shift + Alt + Drag o Shift + Option + Drag)
  Tieni premuti i tasti e trascina il mouse in verticale. Creerà un cursore per ogni riga, perfettamente allineato. È utilissimo quando devi inserire o modificare lo stesso codice all'inizio di un elenco di righe (es. aggiungere tag ad una lista di elementi).

Le 5 scorciatoie da imparare subito per abbandonare il mouse

Non serve memorizzare centinaia di scorciatoie da tastiera. Impara ad usare queste cinque per velocizzare il 90% delle tue azioni quotidiane:

La trappola dell'accumulo

Il Marketplace ospita decine di migliaia di estensioni. Installarle è facilissimo, ma il vero rischio è l'accumulo: ogni estensione aggiunge processi, consuma memoria e rischia di rallentare VS Code. Ricorda la regola d'oro: VS Code nasce leggero, e tocca a te mantenerlo tale. Molti programmatori preferiscono lavorare senza alcuna estensione installata e si trovano benissimo. Non esiste alcun obbligo: installa un'estensione solo quando senti il reale bisogno di risolvere un problema concreto.

Estensioni in base al progetto

La scelta di cosa installare dipende interamente dal tipo di progetto su cui stai lavorando e dalle tue preferenze personali. Ad esempio:

• Se lavori molto sul design visivo o su linguaggi specifici, potresti cercare un'estensione che evidenzi la sintassi o i colori.
• Se lavori in team, potrebbe esserti utile un formatter comune (come Prettier o Biome) o un linter (come ESLint) per allineare lo stile di scrittura con quello dei colleghi.

La regola migliore è non precorrere i tempi: inizia a scrivere codice con l'editor pulito. Man mano che lavorerai a progetti reali, capirai da solo se e quali estensioni ti servono per velocizzare le tue giornate.

E per l'Intelligenza Artificiale (AI)?

L'integrazione di assistenti AI direttamente all'interno dell'editor (come Codex, Claude o altri modelli) è un argomento estremamente vasto e, soprattutto, in continua e rapidissima evoluzione. Le funzionalità e i plugin cambiano così velocemente che qualsiasi elenco o configurazione statica rischierebbe di diventare obsoleta nel giro di poche settimane.

Per darti una panoramica strutturata, capire come usare questi assistenti come supporto senza farti sostituire (e senza perdere le tue capacità analitiche di programmatore), ti rimando al tutorial: Sviluppare con l'AI senza perdere il controllo.

La riga di comando a portata di mano

Il terminale integrato (che puoi aprire e chiudere rapidamente premendo Ctrl + ò sulle tastiere con layout italiano, oppure Ctrl + ` su quelle americane che hanno il tasto dedicato per il simbolo dell'accento grave, il backtick) è uno dei motivi principali del successo di VS Code. Avviandosi in automatico nella cartella principale del tuo progetto (workspace), elimina del tutto la noia di dover navigare tra le cartelle da riga di comando per lanciare i tuoi script.

Per un workflow ottimizzato, sfrutta queste funzionalità native:

• Split terminal: Clicca sull'icona delle due colonne (o premi Ctrl + Shift + 5 / Cmd + \) per dividere lo schermo ed avere due terminali affiancati nello stesso pannello (es. uno per il server locale e uno per i comandi Git).
• Icone e colori personalizzati: Quando hai più terminali aperti, vedrai la lista delle schede sul lato destro del pannello del terminale. Fai clic destro su una di queste schede (ad esempio 1: node) e seleziona Change Color... (Cambia colore) o Change Icon... (Cambia icona) per riconoscerle all'istante (es. verde per il server locale, rosso per i test). Se invece hai un solo terminale aperto, fai clic destro sul nome del terminale che trovi in alto a destra nell'intestazione del pannello per accedere alle stesse voci.

L'integrazione visuale di Git

VS Code integra Git in modo nativo e visivo all'interno del pannello Source Control (che puoi aprire rapidamente premendo Ctrl + Shift + G, o Cmd + Shift + G su Mac).

Questa integrazione è utilissima per chi inizia perché ti permette di:

• Vedere l'elenco esatto di tutti i file che hai modificato, creato o cancellato nel progetto.
• Fare clic su un file modificato per confrontare visivamente le differenze (il "diff") tra la versione precedente e quella nuova, riga per riga.
• Mettere in staging i file e scrivere il tuo messaggio di commit direttamente dalla barra di testo dell'editor, senza dover digitare comandi nel terminale.

Dove continuare il percorso di apprendimento

Per integrare al meglio l'editor con il resto del flusso di sviluppo, ti rimando a questi tutorial:

• Sviluppare con l'AI senza perdere il controllo: per imparare a padroneggiare gli assistenti artificiali (come Codex, Claude o altri modelli) come co-piloti operativi.
• Git pratico senza panico: per comprendere a fondo i meccanismi di rami, commit e conflitti.
• GitHub operativo: per imparare a collaborare in team usando repository remoti, fork e Pull Request.

Ecco un riepilogo rapido delle scorciatoie da tastiera fondamentali per incrementare la tua produttività quotidiana:

Metti alla prova quello che hai imparato allestendo da zero un ambiente di lavoro organizzato e professionale: