Visual Studio Code ora supporta Baseline

Rick Viscomi

Data di pubblicazione: 20 maggio 2025

Gli editor di codice moderni aumentano notevolmente la produttività riunendo gli strumenti e i documenti di riferimento necessari per creare progetti in modo efficiente. Un miglioramento della produttività in molti IDE come Visual Studio Code (VS Code) è la visualizzazione di informazioni aggiuntive sulle funzionalità web quando passi il mouse sopra di esse nell'editor. Queste informazioni includono una descrizione della funzionalità, i browser supportati, una guida alla sintassi e un link per saperne di più su MDN.

Le informazioni sulla compatibilità del browser sono particolarmente utili nel contesto di un IDE, perché puoi ricevere un feedback immediato sull'interoperabilità di una funzionalità semplicemente passandoci sopra il mouse. Puoi utilizzare queste informazioni per decidere se una funzionalità soddisfa i tuoi target di supporto del browser, se devi adottare misure difensive per migliorarla progressivamente o polyfill o se devi evitare di utilizzarla del tutto.

Le versioni precedenti di VS Code esprimevano queste informazioni in termini di numeri di versione del browser, in modo simile a quanto si poteva vedere nelle tabelle di compatibilità su siti come MDN, Can I Use o qui su web.dev. Ma ciò che tutti questi siti hanno in comune è che hanno anche iniziato a riassumere il complesso panorama del supporto dei browser utilizzando Baseline. Pertanto, nel tentativo di allineare VS Code al modo in cui queste altre risorse trasmettono le informazioni sulla compatibilità del browser, ora VS Code supporta anche Baseline.

Per ottenere la nuova UI di base, esegui l'upgrade a VS Code versione 1.100 o successive. Tutto funziona immediatamente, senza estensioni o configurazioni aggiuntive.

Quando passi il mouse sopra una funzionalità web nell'ultima versione di VS Code, vedrai il relativo stato di Baseline. Per darti un'idea di quanto tempo è supportata la funzionalità, VS Code ti indicherà anche l'anno in cui è diventata di base. In alternativa, per le funzionalità che non sono ancora di base, ti indicherà in quali browser la funzionalità non è ancora completamente implementata.

Nelle versioni precedenti di VS Code, questa operazione non era così semplice. È necessario un po' di ragionamento per esaminare un elenco di versioni del browser supportate e capire quali browser mancano. Forse la parte meno semplice da capire è stata per quanto tempo la funzionalità è stata supportata nei vari browser. Per farlo, dovresti sapere quando è stata rilasciata ogni versione, il che non è esattamente di dominio pubblico. Fortunatamente, tutto questo viene preso in considerazione nello stato e nell'anno di riferimento.

Questa release include anche qualcosa di completamente nuovo. In precedenza, potevi visualizzare solo i dati di supporto del browser per le proprietà CSS. Ciò è stato particolarmente utile dato il ritmo incredibile con cui vengono rilasciate nuove funzionalità CSS ogni anno. Ma anche l'HTML è in continua evoluzione. A partire da questa release, VS Code inizierà a mostrare anche le informazioni sul supporto del browser per gli elementi e gli attributi HTML in termini di stato Baseline.

Ad esempio, l'attributo di input autocorrect è stato rilasciato nel suo primo browser, Firefox, solo un paio di mesi fa. È utile ricevere un feedback immediato che indica che la funzionalità ha una disponibilità limitata, in modo da sapere con certezza dove funzionerà e dove no. In questo caso specifico, è innocuo nei browser non supportati, quindi procedi pure.

Altre funzionalità HTML come l'elemento dialog non vengono degradate in modo altrettanto elegante come autocorrect. Pertanto, è rassicurante poter richiamare la scheda al passaggio del mouse dialog e vedere che è effettivamente Baseline dal 2022 ed è considerata ampiamente disponibile nei principali browser. Un approccio di questo tipo dovrebbe darti la sicurezza di adottare funzionalità che altrimenti avresti ritenuto troppo all'avanguardia.

L'API Popover è un altro esempio di funzionalità HTML che è stata resa di base, ma solo dal 2024, quindi è ancora considerata Nuova. Ciò significa che, sebbene sia supportato da tutti i principali browser, non è ancora disponibile da 2 anni e mezzo, il periodo di tempo necessario per diventare ampiamente disponibile. Ti consigliamo quindi di procedere con un po' più di cautela prima di rendere disponibile questa funzionalità a tutti gli utenti.

Avere queste informazioni a portata di mano in VS Code è un ottimo modo per aumentare la produttività. Ma cosa succederebbe se non dovessi nemmeno passare il mouse sopra una funzionalità per vedere se è di base? Ciò è reso possibile da uno strumento separato ma correlato: i linter.

Ad esempio, l'estensione ESLint per VS Code può eseguire il linting dei file HTML e CSS e aggiungere sottolineature a zigzag a qualsiasi funzionalità che non è ancora Baseline. Ciò è reso possibile dalle regole use-baseline aggiunte di recente dai plug-in HTML ESLint ed ESLint per CSS. Esiste una regola simile anche per Stylelint, se ti interessa. Naturalmente, questo è solo uno dei tanti vantaggi dei linter, ma dimostra quanto bene si integrino con le nuove schede al passaggio del mouse abilitate per Baseline.

Se utilizzi VS Code, ti consiglio di provare le nuove schede popup. E se non utilizzi VS Code, ho ottime notizie per te. Molti IDE sono fork di Code - OSS (la versione open source di VS Code) o si basano sugli stessi language server che alimentano le schede al passaggio del mouse HTML e CSS. L'upgrade di questi IDE downstream all'ultima versione potrebbe richiedere settimane o mesi, ma quando lo fanno, dovrebbero ereditare automaticamente la nuova UI di base:

• VSCodium
• Firebase Studio
• Cursore
• Windsurf
• Zed
• Eclipse Theia
• Trae
• GitHub Codespaces
• Spazi di lavoro GitLab
• Replit
• StackBlitz (Bolt)

JetBrains sta anche lavorando per integrare Baseline con tutti i suoi IDE basati su IntelliJ, a partire da WebStorm. Ne parleremo più nel dettaglio in un post del blog separato, quindi continuate a seguirci.

Sempre più strumenti e risorse per sviluppatori stanno aggiungendo il supporto di Baseline e queste nuove integrazioni IDE guidate da VS Code sono particolarmente entusiasmanti. Passiamo così tanto tempo nei nostri IDE che avere questi dati di base a portata di mano ci aiuterà a portare ancora più chiarezza e coerenza tra gli strumenti nei nostri flussi di lavoro di sviluppo. Per scoprire di più su Baseline e altre integrazioni di strumenti come questa, consulta la nostra guida a Baseline per ulteriori risorse.