DescubreApple

Apple, Mac, iPhone, iPad

OS X

Come configurare Visual Studio Code su Mac per lo sviluppo web professionale

Guida passo passo per preparare Visual Studio Code al lavoro su Mac con Apple Silicon: installazione, estensioni, integrazione con Zsh, Homebrew e impostazioni reali per React, Vue e Node.js.

JG
Di · 9 min di letturaImmagini generate con IA
Cómo configurar Visual Studio Code en Mac para desarrollo web profesional
Como Configurar Visual Studio Code En Mac Para Desarrollo Web Profesional

Allestire un ambiente di sviluppo web su Mac con Visual Studio Code non è complicato, ma la differenza tra "ce l’ho installato" e "lo tengo configurato per lavorare sul serio" sono diverse ore e qualche impostazione di cui quasi nessuno ti parla. Questa guida serve proprio a questo: preparare VS Code per scrivere codice davvero su un MacBook con Apple Silicon, con estensioni utili (non le 40 di moda), integrazione con il terminale Zsh e Homebrew, e una configurazione che regge progetti reali di React, Vue o Node.js.

Tempo stimato: tra 30 e 45 minuti partendo da zero. Valido per macOS Sequoia 15.x e Ventura 13.x su qualsiasi Mac con chip M1, M2, M3 o M4.

Requisiti preliminari

Prima di toccare VS Code, conviene che il Mac sia preparato almeno minimamente.

  • macOS 13 Ventura o successivo. VS Code funziona anche su versioni precedenti, ma molte estensioni moderne richiedono la 13 o superiore.
  • Command Line Tools di Xcode. Si installano da sole la prima volta che esegui git nel terminale, oppure manualmente con xcode-select --install.
  • Homebrew installato. È la via più pulita per gestire Node, Git e le utility. Istruzioni su brew.sh.
  • Account GitHub se userai Copilot o la sincronizzazione delle impostazioni.

Scheda rapida dell’ambiente consigliato:

Componente Versione consigliata (2026)
macOS Sequoia 15.4 o successiva
Visual Studio Code 1.95+ (Universal / Apple Silicon)
Node.js 22 LTS
Git 2.47+
Shell Zsh (predefinita su macOS)
Homebrew 4.4+

Scaricare la versione corretta per Apple Silicon

Qui si commettono già i primi errori. Vai su code.visualstudio.com e scarica il binario Apple Silicon, non quello Intel né l’Universal. L’Universal funziona, ma pesa il doppio e non porta nulla se il tuo Mac è M1, M2, M3 o M4.

Per verificare il chip: menu Apple → Informazioni su questo Mac. Se vedi "Apple M…", scegli la versione Silicon.

Alternativa tramite Homebrew, più comoda se lo usi già:

brew install --cask visual-studio-code

Homebrew rileva l’architettura e scarica il pacchetto giusto. Inoltre, aggiornarlo in seguito è brew upgrade --cask visual-studio-code senza dover scaricare a mano il DMG.

Primo avvio e impostazioni di base

Trascina VS Code in Applicazioni (se hai usato il DMG) e aprilo. Al primo avvio:

  1. Accetta di aprire l’app scaricata da Internet.
  2. Scegli il tema. Default Dark Modern va bene; se lavori molto di giorno, GitHub Light Default affatica meno la vista.
  3. Salta per ora il passaggio di sincronizzazione: lo vedremo dopo.

La prima cosa utile da fare è attivare il comando code nel terminale. Apri la palette dei comandi con ⌘ + Maiuscole + P, digita "shell command" e scegli Shell Command: Install 'code' command in PATH. Da quel momento, code . da qualsiasi cartella apre il progetto in VS Code.

Configurare l’integrazione con Zsh e il terminale

macOS usa Zsh come predefinita da Catalina. VS Code lo rileva, ma conviene rifinire il terminale integrato.

Apri le Impostazioni con ⌘ + , e cerca:

  • terminal.integrated.defaultProfile.osx → impostalo su zsh.
  • terminal.integrated.fontSize → 13 o 14 se il tuo schermo è un Retina da 14".
  • terminal.integrated.fontFamily → MesloLGS NF se userai Powerlevel10k, oppure lascia quella di sistema.

Per un’esperienza decente con Zsh, installa Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

E aggiungi due plugin molto usati: zsh-autosuggestions e zsh-syntax-highlighting. Si installano con Homebrew (brew install zsh-autosuggestions zsh-syntax-highlighting) e si attivano aggiungendo due righe alla fine del tuo ~/.zshrc. La documentazione ufficiale di ciascuno spiega il percorso esatto per il tuo sistema.

Riavvia il terminale integrato di VS Code (⌃ + ` per aprirlo) e avrai già l’autocompletamento intelligente.

Installare Node.js con Homebrew (e perché non con l’installer ufficiale)

Puoi scaricare il .pkg da nodejs.org, certo. Ma se un giorno vorrai passare da Node 22 a Node 24, o mantenere due versioni per due progetti, te ne pentirai.

L’opzione sensata è nvm (Node Version Manager):

brew install nvm
mkdir ~/.nvm

Aggiungi al tuo ~/.zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"

Ricarica con source ~/.zshrc e potrai eseguire nvm install 22, nvm use 22, nvm install 20, cambiare versione per progetto, ecc. VS Code lo rileva automaticamente nel terminale integrato.

Estensioni essenziali per lo sviluppo web

Qui il tranello è installare venti estensioni "non si sa mai". VS Code rallenta e molte si sovrappongono. Queste sono quelle che portano valore reale:

Base per qualsiasi progetto web:

  • ESLint (Microsoft) — linting di JS/TS. Indispensabile.
  • Prettier – Code formatter — formattazione automatica. Impostala come formattatore predefinito.
  • EditorConfig for VS Code — rispetta i .editorconfig dei progetti altrui.
  • GitLens — cronologia Git dentro l’editor. La versione gratuita basta e avanza.

Per React / Next.js:

  • ES7+ React/Redux/React-Native snippets — snippet rapidi (rafce e simili).
  • Simple React Snippets se preferisci qualcosa di più leggero.

Per Vue:

  • Vue – Official (prima Volar). Installala e disattiva Vetur se lo hai.
  • TypeScript Vue Plugin (Volar) se lavori con TS.

Per Node.js:

  • REST Client — testare gli endpoint senza uscire da VS Code, alternativa a Postman.
  • DotENV — sintassi per i file .env.

Qualità della vita:

  • Path Intellisense — autocompleta i percorsi dei file.
  • Error Lens — mostra gli errori sulla riga, non solo sottolineati.
  • Auto Rename Tag — rinomina in coppia i tag HTML/JSX.

Evita i pacchetti "tutto incluso" tipo "React Extension Pack". Portano cose che non usi e rallentano l’avvio.

Impostazioni di settings.json che fanno la differenza

Apri la palette con ⌘ + Maiuscole + P e cerca "Preferences: Open User Settings (JSON)". Aggiungi o modifica:

{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Menlo, monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.linkedEditing": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "workbench.startupEditor": "none",
  "terminal.integrated.fontSize": 13,
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

Punti chiave: formatOnSave con Prettier evita discussioni sullo stile, linkedEditing rinomina in coppia i tag HTML, e disattivare la minimappa libera spazio reale su un MacBook Air da 13".

Installa JetBrains Mono con brew install --cask font-jetbrains-mono se non ce l’hai. Anche Fira Code o Cascadia Code funzionano bene con le legature.

Git e GitHub: autenticazione pulita

Configura la tua identità globale:

git config --global user.name "Tu Nome"
git config --global user.email "tu@email.com"
git config --global init.defaultBranch main

Per autenticarti con GitHub, la via moderna è l’estensione GitHub Pull Requests and Issues di Microsoft. Al primo push avvia il flusso OAuth nel browser e salva le credenziali nel Portachiavi di macOS. Nessun token manuale, nessun ~/.netrc.

Se preferisci SSH, genera la chiave con ssh-keygen -t ed25519 -C "tu@email.com" e aggiungi la pubblica su GitHub → Settings → SSH keys.

GitHub Copilot e alternative

Copilot costa 10 $ al mese (circa 9,50 € nel 2026, fatturazione in dollari) per uso individuale, gratuito per studenti verificati e manutentori di progetti open source popolari. Si installa come estensione e si autentica con lo stesso account GitHub.

Alternative valide:

  • Codeium — gratuito per uso individuale, estensione ufficiale nel Marketplace.
  • Continue — open source, permette di collegare il tuo modello (Claude, GPT-4, modelli locali tramite Ollama).
  • Cursor — non è un’estensione, è un fork completo di VS Code. Se Copilot ti sembra limitato, merita una prova.

Per lo sviluppo web frontend, Copilot resta il più rifinito nell’autocompletamento in linea. Codeium gli è molto vicino e non costa nulla.

Sincronizzare le impostazioni tra più Mac

Se hai un MacBook Pro e un Mac mini, attiva Settings Sync: palette dei comandi → "Settings Sync: Turn On". Puoi scegliere di sincronizzare impostazioni, estensioni, scorciatoie, snippet e stato dell’interfaccia. Viene salvato nel tuo account Microsoft o GitHub.

Alternativa manuale se non vuoi account: salvare il tuo settings.json e l’elenco delle estensioni in un repo privato su GitHub. Le estensioni installate si elencano con:

code --list-extensions > extensions.txt

E si reinstallano sull’altro Mac con un semplice ciclo.

Problemi comuni

VS Code va lento con progetti grandi. Escludi node_modules e .next dall’indicizzazione in settings.json:

"files.watcherExclude": {
  "**/node_modules/**": true,
  "**/.next/**": true,
  "**/dist/**": true
}

Il comando code non funziona nel terminale. Riesegui "Shell Command: Install 'code' command in PATH". Se continua a fallire, verifica che /usr/local/bin sia nel tuo $PATH.

Prettier non formatta al salvataggio. Controlla che sia impostato come formattatore predefinito e che il progetto non abbia un .prettierignore che esclude il file.

Il terminale non trova nvm o node. Di solito è perché ~/.zshrc non viene caricato. Verifica che il terminale integrato usi Zsh e non Bash: Impostazioni → cerca terminal.integrated.defaultProfile.osx.

Copilot non suggerisce nulla. Controlla di essere autenticato (icona nella barra inferiore) e che il linguaggio del file non sia nella lista di esclusione dell’estensione.

Alternative a VS Code su Mac

VS Code non è l’unico editor valido per Mac, anche se è il più usato. Se le prestazioni ti interessano molto, dai un’occhiata a Zed (nativo, scritto in Rust, si avvia in meno di un secondo). Per JavaScript/TypeScript pesante, WebStorm di JetBrains resta più potente nel refactoring, anche se costa 169 € all’anno per uso individuale dopo il primo anno.

Se lavori spesso con i container, ti conviene affiancare a VS Code un Docker Desktop ben configurato su Apple Silicon per non consumare troppa batteria. E se passerai molte ore al giorno a scrivere codice, la differenza tra la tastiera del MacBook e una tastiera meccanica esterna si sente sui polsi dopo un mese di utilizzo.

FAQ

VS Code funziona bene su un MacBook Air M3 da 8 GB? Sì, per progetti piccoli e medi (React, Vue, siti statici). Con monorepo grandi o più container Docker attivi, 16 GB si apprezzano parecchio.

Vale la pena pagare Copilot se già uso ChatGPT? Dipende. Copilot integra i suggerimenti in linea mentre scrivi, cosa che ChatGPT nel browser non fa. Se copi e incolli continuamente codice tra schede, Copilot ti fa risparmiare tempo. Se fai solo domande puntuali, no.

Posso usare VS Code per lo sviluppo iOS o Mac nativo? Tecnicamente sì con le estensioni di Swift, ma Xcode resta obbligatorio per compilare e firmare. Per Swift puro senza app Apple, VS Code con l’estensione ufficiale di Swift va bene.

Come disinstallo VS Code completamente? Trascina l’app nel Cestino ed elimina ~/Library/Application Support/Code e ~/.vscode. Se l’hai installato con Homebrew, brew uninstall --cask visual-studio-code e poi elimina quelle cartelle.

Vale la pena VS Code Insiders? È la versione di test, si aggiorna ogni giorno. Utile se vuoi le novità in anticipo o sei sviluppatore di estensioni. Per il lavoro quotidiano, resta sulla stabile.

JG

Altro su OS X

🇮🇹 IT