Guida Completa a Visual Studio Code

0Introduzione

Visual Studio Code (VS Code) è l'editor di codice più usato al mondo. Gratuito, open source, veloce, e soprattutto estensibile: migliaia di estensioni lo trasformano in un ambiente completo per qualsiasi linguaggio.

In questa guida vedrai come:

• Installarlo e configurarlo la prima volta
• Lavorare con HTML, CSS, JavaScript, Python, C++ e PHP
• Scegliere le estensioni giuste per ogni linguaggio
• Imparare le scorciatoie da tastiera che fanno risparmiare ore
• Usare trucchi professionali (multi-cursore, refactoring, debug, Git integrato)

1Installazione e Setup

Download e installazione

Scarica VS Code dal sito ufficiale: code.visualstudio.com. Scegli la versione per il tuo sistema operativo.

# Debian/Ubuntu
sudo apt install code

# Fedora/RHEL
sudo dnf install code

# Snap
sudo snap install code --classic

Configurazione iniziale

2L'Interfaccia di VS Code

L'interfaccia è composta da 5 aree principali:

3HTML e CSS in VS Code

Setup base

VS Code supporta HTML e CSS nativamente, ma per lavorare professionalmente servono alcune estensioni e un flusso di lavoro:

Emmet — il tuo superpotere per HTML/CSS

Emmet è integrato in VS Code. Trasforma abbreviazioni in codice completo premendo Tab.

Live Server — anteprima automatica

Con l'estensione Live Server (Ritwick Dey) puoi vedere le modifiche al volo nel browser:

Prettier — formattazione automatica

Prettier formatta HTML, CSS, JS, JSON e Markdown automaticamente. Configura «Format on Save» in Settings → Editor: Format On Save.

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100
}

4JavaScript in VS Code

VS Code è nato per JavaScript: supporto nativo, IntelliSense, debug, integrazione Node.js e npm.

Setup base

Debug con breakpoint

VS Code ha un debugger integrato potentissimo. Ecco come usarlo:

function calcolaMedia(voti) {
  let somma = 0;
  for (let i = 0; i < voti.length; i++) {
    somma += voti[i]; // ← clicca a sinistra di questa riga
  }
  return somma / voti.length;
}

console.log(calcolaMedia([8, 7, 9, 6]));

Quando il codice si ferma sul breakpoint, nella Run & Debug panel vedi:

• Variables — il valore di tutte le variabili in quel momento
• Watch — espressioni personalizzate da monitorare
• Call Stack — la catena di chiamate
• Breakpoints — tutti i punti di interruzione attivi

Estensioni JavaScript

5Python in VS Code

Setup completo

Il tuo primo script

def saluta(nome):
    return f"Ciao, {nome}!"

if __name__ == "__main__":
    print(saluta("Mondo"))

Per eseguirlo:

• Clicca sull'icona ▶ in alto a destra, oppure
• Ctrl+F5 (Run senza debug), oppure
• Nel terminale integrato (Ctrl+`): python hello.py

Debug Python

Clicca a sinistra del numero di riga per mettere un breakpoint. Premi F5 per avviare il debug. Puoi:

• Step Over (F10) — esegui la riga corrente
• Step Into (F11) — entra nella funzione chiamata
• Continue (F5) — vai al prossimo breakpoint

Ambienti virtuali

Per isolare le dipendenze di ogni progetto:

# Crea un ambiente virtuale
python -m venv .venv

# Attivalo (Windows)
.venv\Scripts\activate

# Attivalo (macOS/Linux)
source .venv/bin/activate

# Installa pacchetti
pip install requests

# Salva le dipendenze
pip freeze > requirements.txt

Estensioni Python

6C++ in VS Code

Prerequisiti

Per compilare C++ ti serve un compilatore:

• Windows: MinGW-w64 (installalo tramite MSYS2 o l'installer standalone)
• macOS: Xcode Command Line Tools (xcode-select --install)
• Linux: GCC (sudo apt install build-essential)

Setup VS Code

#include <iostream>
using namespace std;

int main() {
    cout << "Ciao, mondo!" << endl;
    return 0;
}

7PHP in VS Code

Prerequisiti

Installa PHP:

• Windows: XAMPP, WAMP o installazione nativa
• macOS: brew install php
• Linux: sudo apt install php

Estensioni essenziali PHP

Eseguire PHP

Il modo più semplice è usare il server integrato di PHP:

# Dalla cartella del progetto
php -S localhost:8000

# Ora apri http://localhost:8000 nel browser

<?php
$nome = "Mondo";
echo "Ciao, $nome!";
?>

<!DOCTYPE html>
<html>
<body>
  <h1>Pagina PHP</h1>
</body>
</html>

8Estensioni Top da Installare

Ecco le estensioni che ogni sviluppatore dovrebbe avere, indipendentemente dal linguaggio.

Universali (sempre utili)

Web Development

Python & Data Science

9Scorciatoie da Tastiera

Le scorciatoie sono ciò che distingue un principiante da un utente esperto. Ecco le più importanti, divise per categoria.

Generali

Editing

Navigazione

Visualizzazione

Debug & esecuzione

10Trucchi da Sviluppatore Esperto

1. Multi-cursore

Premi Alt+Click per aggiungere cursori multipli. Utile per modificare più righe contemporaneamente.

Seleziona una parola e premi Ctrl+D ripetutamente per selezionare le occorrenze successive.

2. Command Palette (sempre)

Ctrl+Shift+P e digita quello che vuoi fare. VS Code ha oltre 1000 comandi: cerca «format», «sort», «convert», «run» — c'è quasi sempre un comando pronto.

3. Ricerca intelligente

Premi Ctrl+F nell'editor e usa i toggle:

• Aa — Match case (maiuscole/minuscole)
• ab — Match whole word (parola intera)
• .* — Regex (espressioni regolari)

Con Ctrl+Shift+F cerchi in tutto il progetto, con filtri per tipo di file.

4. Emmet ovunque

Oltre a HTML/CSS, Emmet funziona anche in JSX, Vue, Svelte, PHP e altri. Sempre con Tab.

5. Refactoring intelligente

Clicca destro su una variabile → Rename Symbol (F2). VS Code rinomina tutte le occorrenze nel progetto, non solo dove hai il cursore.

6. Anteprima Markdown

Apri un file .md e premi Ctrl+Shift+V per l'anteprima. Ctrl+K V per l'anteprima affiancata (split).

7. Integrazione Git

VS Code ha Git integrato. Nell'Activity Bar, l'icona con il ramo mostra:

• File modificati (in giallo) e nuovi (in verde)
• Pulsanti per stage, commit, push/pull
• Risoluzione conflitti con diff visuale

Con GitLens vedi chi ha scritto ogni riga, quando, e in quale commit.

8. Terminale integrato

Ctrl+` apre il terminale. Puoi:

• Aprire più terminali con Ctrl+Shift+5
• Dividerli (split) con il pulsante in alto
• Cercare nel terminale con Ctrl+F
• Scegliere la shell predefinita (PowerShell, Bash, Zsh) in Settings

9. Snippet personalizzati

Crea i tuoi snippet riutilizzabili. File → Preferences → Configure User Snippets → scegli linguaggio → aggiungi:

{
  "HTML5 base": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"it\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <title>$1</title>",
      "</head>",
      "<body>",
      "  $2",
      "</body>",
      "</html>"
    ],
    "description": "Struttura HTML5 base"
  }
}

Poi in un file HTML scrivi html5 e premi Tab. Il tuo snippet viene inserito!

10. Estensioni per produttività

11Esercizi Pratici

mio-sito/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── img/

// Lista con 5 elementi
ul>li*5

// Tabella con header e 3 righe
table>thead>tr>th*3^^tbody>tr*3>td*3

// Form con 3 campi e bottone
form>(label+input)*3+button[type=submit]

function fattoriale(n) {
  let risultato = 1;
  for (let i = 2; i <= n; i++) {
    risultato *= i; // ← breakpoint qui
  }
  return risultato;
}

console.log(fattoriale(5)); // 120