Git in VS Code

Guida pratica per usare Git direttamente in Visual Studio Code

VS Code ha un'integrazione nativa con Git che permette di gestire repository, commit, branch e molto altro senza mai uscire dall'editor.

Prerequisiti

Prima di iniziare, assicurati di avere:

1. Git installato sul tuo sistema

   git --version

2. Repository inizializzato nella cartella del progetto

   git init

3. Git configurato con nome e email

   git config --global user.name "Tuo Nome"
   git config --global user.email "tua.email@loud-agency.info"

---

Apertura della Source Control

Accedere al pannello Git

Ci sono 3 modi per aprire il pannello Source Control:

1. Icona nella sidebar (3° icona da sinistra, simbolo di branch)
2. Shortcut: Ctrl+Shift+G (Windows/Linux) o Cmd+Shift+G (Mac)
3. Command Palette: Ctrl+Shift+P → "Git: Focus on Source Control View"

Cosa vedi nel pannello

• Changes: File modificati non ancora staged
• Staged Changes: File pronti per il commit
• Numero di modifiche: Badge blu sull'icona Source Control

---

Staging dei File

Stage Singoli File

Quando modifichi un file, apparirà sotto "Changes" con una lettera che indica lo stato:

• M = Modified (modificato)
• U = Untracked (nuovo file)
• D = Deleted (cancellato)

Per fare staging di un file:

1. Hover sul file → Click sul + (Stage Changes)
2. Oppure: Tasto destro → "Stage Changes"

Stage Tutti i File

• Click sul + accanto a "Changes" → Staging di tutti i file modificati
• Shortcut: Hover su "Changes" e click +

Unstage File

Se vuoi rimuovere un file dallo staging:

1. Hover sul file in "Staged Changes" → Click su - (Unstage Changes)
2. Oppure: Tasto destro → "Unstage Changes"

---

Creare un Commit

Commit Rapido

1. Scrivi il commit message nella casella di testo in alto nel pannello Source Control
2. Click sul pulsante ✓ Commit (oppure Ctrl+Enter / Cmd+Enter)

Commit con Descrizione Estesa

Per commit più complessi con descrizione:

1. Scrivi il titolo del commit (prima riga)
2. Premi Enter due volte per lasciare una riga vuota
3. Scrivi la descrizione dettagliata
4. Click su ✓ Commit

Esempio:

Aggiunta funzionalità di login

- Implementato form di login con validazione
- Aggiunta gestione errori
- Integrato con API backend

Commit e Push Insieme

• Click sulla freccia accanto a "Commit" → Commit & Push
• Oppure usa: Ctrl+Shift+P → "Git: Commit All and Push"

---

Gestione Branch

Visualizzare Branch Corrente

In basso a sinistra vedrai il nome del branch corrente (es. main, develop)

Creare Nuovo Branch

1. Click sul nome branch in basso a sinistra
2. Seleziona "Create new branch..."
3. Inserisci il nome (es. feature/nuova-funzionalita)
4. Premi Enter

Oppure:

• Command Palette → "Git: Create Branch..."

Cambiare Branch

1. Click sul nome branch in basso a sinistra
2. Seleziona il branch da aprire dalla lista

Oppure:

• Command Palette → "Git: Checkout to..."

Eliminare Branch

1. Command Palette → "Git: Delete Branch..."
2. Seleziona il branch da eliminare
3. Conferma

⚠️ Attenzione: Non puoi eliminare il branch su cui sei attualmente.

---

Pull e Push

Push (Inviare Commit al Remote)

Dopo aver fatto commit, devi inviare le modifiche al repository remoto:

1. Click sull'icona "..." nel pannello Source Control
2. Seleziona "Push"

Oppure:

• Click sulla freccia in alto nella status bar (vicino al nome branch)
• Shortcut: Ctrl+Shift+P → "Git: Push"

Pull (Ricevere Modifiche dal Remote)

Per sincronizzare le modifiche degli altri:

1. Click sull'icona "..." → "Pull"
2. Oppure: Click sulla freccia in basso nella status bar

Sync (Pull + Push Automatico):

• Click su "Sync Changes" (icona circolare nella status bar)

---

Visualizzare la History

Timeline

Nella sidebar, sotto il file explorer, c'è la sezione "Timeline" che mostra tutti i commit del file corrente.

Git History (Extension consigliata)

Installa l'extension Git Graph per visualizzare l'albero dei commit:

1. Ctrl+Shift+X → Cerca "Git Graph"
2. Installa
3. Apri con: Command Palette → "Git Graph: View Git Graph"

Diff dei Commit

Per vedere cosa è cambiato in un commit:

1. Click sul file modificato nel pannello Source Control
2. VS Code aprirà un diff editor con confronto side-by-side

---

Visualizzare le Modifiche

Inline Changes

Quando modifichi un file, VS Code mostra delle barre colorate nel margine:

• Blu = Linea modificata
• Verde = Linea aggiunta
• Triangolo rosso = Linea cancellata

Hover sulla barra per vedere:

• Codice originale
• Opzioni: Revert, Stage, Copy

Diff Side-by-Side

1. Click sul file nel pannello Source Control
2. VS Code aprirà un editor split:
   • Sinistra: Versione originale (HEAD)
   • Destra: Versione modificata

---

Annullare Modifiche

Discard Changes (File Singolo)

Per annullare le modifiche di un file NON ancora committato:

1. Pannello Source Control → Tasto destro sul file
2. "Discard Changes"
3. Conferma

⚠️ Attenzione: Questa azione è irreversibile.

Discard All Changes

• Click sull'icona "..." → "Discard All Changes"

Revert Commit

Per annullare un commit già fatto:

1. Command Palette → "Git: Undo Last Commit"
2. Questo mantiene le modifiche ma rimuove il commit

---

Merge e Conflitti

Merge Branch

1. Passa al branch di destinazione (es. main)
2. Command Palette → "Git: Merge Branch..."
3. Seleziona il branch da mergeare

Risolvere Conflitti

Quando c'è un conflitto, VS Code mostra delle opzioni inline:

<<<<<<< HEAD
const message = "Hello World";
=======
const message = "Ciao Mondo";
>>>>>>> feature-branch

Opzioni disponibili:

• Accept Current Change (mantieni versione HEAD)
• Accept Incoming Change (mantieni versione branch)
• Accept Both Changes (mantieni entrambe)
• Compare Changes (apri diff editor)

Dopo aver risolto, stage il file e fai commit.

---

Stash

Creare Stash

Quando vuoi cambiare branch ma hai modifiche non committate:

1. Command Palette → "Git: Stash"
2. Inserisci un messaggio descrittivo
3. Le modifiche vengono salvate e il working directory viene pulito

Applicare Stash

1. Command Palette → "Git: Apply Stash..."
2. Seleziona lo stash da applicare

Eliminare Stash

• Command Palette → "Git: Drop Stash..."

---

Configurazioni

Impostazioni Consigliate

Apri le impostazioni (Ctrl+,) e cerca:

{
  // Auto-fetch ogni 3 minuti
  "git.autofetch": true,

  // Conferma prima di fare push force
  "git.confirmForcePush": true,

  // Conferma prima di sincronizzare
  "git.confirmSync": false,

  // Abilita smart commit (commit di tutti i file se nessuno è staged)
  "git.enableSmartCommit": true,

  // Suggerisci stage per commit quando non ci sono file staged
  "git.suggestSmartCommit": true
}

---

Extensions

Must-Have

1. GitLens - Visualizza chi ha scritto ogni linea di codice

   • Hover sul codice per vedere commit info
   • Blame annotations inline

2. Git Graph - Albero dei commit visuale

   • Visualizza branch tree
   • Click su commit per dettagli

3. Git History - Storia completa del repository

   • Cerca nella history
   • Compara branch

Installazione Rapida

code --install-extension eamodio.gitlens
code --install-extension mhutchie.git-graph
code --install-extension donjayamanne.githistory

---

Workflow Consigliato

Flusso Giornaliero

1. Mattina: Pull per sincronizzare

   Click icona Sync nella status bar

2. Sviluppo: Commit frequenti e atomici

   - Modifica codice
   - Stage file (Ctrl+Shift+G → Click +)
   - Commit con messaggio chiaro
   - Push quando feature completa

3. Feature Nuova: Crea branch

   Click nome branch → Create new branch → "feature/nome-feature"

4. Fine Giornata: Push tutto

   Click Sync per inviare tutti i commit

---

Troubleshooting

"Git not found"

Soluzione:

1. Installa Git: https://git-scm.com/downloads
2. Riavvia VS Code
3. Verifica path: Ctrl+, → Cerca "git.path"

Conflitti non risolti

Sintomi: VS Code non permette di committare

Soluzione:

1. Apri il file con conflitto
2. Risolvi usando "Accept Current/Incoming"
3. Stage il file risolto
4. Commit

Push fallito (rejected)

Sintomi: "Updates were rejected because the remote contains work that you do not have locally"

Soluzione:

# Opzione 1: Pull con rebase
Git: Pull (Rebase) dalla Command Palette

# Opzione 2: Pull normale + risolvi conflitti
Click Sync → Risolvi conflitti → Push

---

Risorse Aggiuntive

• Git Documentation Ufficiale
• VS Code Git Documentation
• GitLens Documentation

---

Tips Pro

1. Commit Messages Conventions: Usa Conventional Commits

   feat: aggiunta funzionalità login
   fix: risolto bug nel form
   docs: aggiornata documentazione API

2. Keyboard Shortcuts Essenziali:

   • Ctrl+Shift+G - Apri Source Control
   • Ctrl+Enter - Commit rapido
   • Ctrl+K Ctrl+D - Vai a successiva modifica
   • Ctrl+K Ctrl+N - Vai a prossimo conflitto

3. Gutter Actions: Click sulle barre colorate per:

   • Stage singola modifica
   • Revert singola modifica
   • Copiare codice precedente

---

Questa guida copre tutto ciò che serve per lavorare efficacemente con Git in VS Code. Buon coding! 🚀