Visual Studio Code, nuova interfaccia in preview: densità compatta e tab
Il 15 ottobre 2026 il team di Visual Studio Code ha presentato la modernizzazione dell’interfaccia dell’editor, disponibile in preview. Lo racconta Lee Murray sul blog ufficiale di VS Code. La nuova UI è attiva per impostazione predefinita, ma su un display 1920 x 1080 al 100% di zoom occupa circa 20 px in più in orizzontale e 12-18 px in più in verticale, a seconda del layout. Per questo è arrivata una densità compatta, insieme a tab ridisegnate e a un’opzione temporanea per tornare all’interfaccia classica.
Cosa cambia nell’interfaccia di VS Code
Secondo il team, l’obiettivo non è reinventare l’editor ma rendere più chiara la gerarchia, ridurre le distrazioni e dare una base di design condivisa all’editing e alle sessioni con agenti, senza rinunciare a densità, personalizzazione e memoria muscolare.
Il lavoro è partito dai temi Dark 2026 e Light 2026, è passato dalla finestra Agents (disponibile in Stable come Preview nel corso del 2026) e ora arriva all’editor. Le due finestre condividono tipografia, spaziatura, colori, schede e controlli.
Gli interventi riguardano Activity Bar, barre laterali, gruppi di editor, pannello, tab e barra di stato. Le aree principali sono separate in modo più chiaro, i controlli per ridimensionare e spostare i pannelli sono più facili da trovare, la tipografia è più semplice e le etichette tutte maiuscole sono sparite. Spaziatura, raggi degli angoli e colori seguono un criterio uniforme.
Più spazio per i controlli, meno per il codice
Il rollout è stato graduale e il team ha raccolto feedback in una discussione pubblica. Le segnalazioni riguardavano la densità generale, con meno spazio per codice, righe degli alberi e output del terminale, soprattutto su schermi piccoli e con più gruppi di editor. Altre criticità erano le tab a pillola, la spaziatura della barra di stato, i separatori dei pannelli, il controllo sui temi e le prestazioni.
La risposta è Layout Density: la densità compatta riduce la spaziatura mantenendo struttura e personalizzazione della nuova UI. Si attiva da Customize Layout nella barra del titolo, scegliendo Layout Density > Compact, oppure impostando window.density.layout su compact. Secondo il team, unita a tema e colori può avvicinare il layout a quello precedente.
Tab connesse e impostazioni opzionali
Le tab a pillola della prima versione comparivano come controlli separati sopra l’editor. Le nuove tab connesse uniscono la tab selezionata alla superficie dell’editor sotto, in un’unica area continua. Chi preferisce la pillola può tornarci con workbench.experimental.modernUIEditorTabStyle.
Tre impostazioni opzionali:
workbench.experimental.modernUIUppercaseViewHeaders: intestazioni delle viste, titoli delle barre laterali e tab del pannello in maiuscolo;workbench.activityBar.compact: Activity Bar più stretta, che libera spazio orizzontale;workbench.editor.tabActionReserveSpace: stabilisce se le tab riservano sempre spazio ai pulsanti azione; disattivandola, le tab inattive pulite hanno più spazio.
Le impostazioni con «experimental» nel nome possono cambiare o sparire mentre il design si stabilizza. Le altre sono controlli di personalizzazione supportati, non passaggi obbligati di migrazione. Il feedback ha prodotto anche ritocchi a separazione dei pannelli, controlli di ridimensionamento, spaziatura della barra di stato e personalizzazione dei temi.
Cosa cambia per chi scrive temi
I temi esistenti restano compatibili sia con la UI modernizzata sia con quella classica. I nuovi ID colore, se un tema non li definisce, ricadono sui colori del workbench già noti. Gli autori possono adottarli per un controllo più fine, ma sono sperimentali: vanno provati su entrambe le interfacce e su temi chiari, scuri e ad alto contrasto.
Prestazioni: i numeri e i loro limiti
Dopo le segnalazioni sulla reattività, il team ha corretto una prima serie di selettori CSS. Il benchmark combina interazioni comuni: ridimensionamento, cambio di vista, scorrimento, apertura dei diff e animazioni dei widget.
| Misura | Variazione |
|---|---|
| Ricalcolo degli stili | -8,2% |
| Tempo reale (wall-clock) | -3,3% |
| Tempo di layout | +6,6% |
Il risultato, precisa il team, recupera parte della differenza rispetto all’interfaccia precedente ma non tutta. Sono miglioramenti mirati, non una promessa di un workbench più veloce. Per evitare regressioni, regole di lint rifiutano i selettori noti come costosi e il comando npm run perf:css offre un benchmark ripetibile.
Come tornare alla UI classica e fino a quando
Durante la transizione si può tornare all’interfaccia classica aprendo le Impostazioni, cercando workbench.experimental.modernUI e togliendo la spunta.
L’opzione è temporanea: il team prevede di ritirare in futuro la UI classica, non ha fissato una data e promette un preavviso prima della fine della transizione.
