Visual Studio Code est désormais compatible avec la référence

Rick Viscomi

Publié le 20 mai 2025

Les éditeurs de code modernes permettent de gagner en productivité en rassemblant les outils et les documents de référence dont vous avez besoin pour créer des applications efficacement. C'est le "I" d'IDE. De nombreux IDE, comme Visual Studio Code (VS Code), améliorent la productivité en affichant des informations supplémentaires sur les fonctionnalités Web lorsque vous pointez dessus dans l'éditeur. Ces informations incluent une description de la fonctionnalité, les navigateurs compatibles, un guide de syntaxe et un lien vers MDN pour en savoir plus.

Les informations sur la compatibilité des navigateurs sont particulièrement utiles dans le contexte d'un IDE, car vous pouvez obtenir un retour instantané sur l'interopérabilité d'une fonctionnalité en pointant simplement dessus. Vous pouvez utiliser ces informations pour déterminer si une fonctionnalité répond à vos objectifs de compatibilité avec les navigateurs, si vous devez prendre des mesures défensives pour l'améliorer progressivement ou la polyfiller, ou si vous devez renoncer à l'utiliser complètement.

Les versions antérieures de VS Code exprimaient ces informations en termes de numéros de version du navigateur, comme vous avez pu le voir dans les tableaux de compatibilité sur des sites tels que MDN, Can I Use ou ici sur web.dev. Mais ce que tous ces sites ont en commun, c'est qu'ils ont également commencé à résumer le paysage complexe de la prise en charge des navigateurs à l'aide de Baseline. Afin d'harmoniser VS Code avec la façon dont ces autres ressources transmettent les informations sur la compatibilité des navigateurs, VS Code est désormais compatible avec Baseline.

Pour obtenir la nouvelle interface utilisateur de référence, passez à la version 1.100 ou ultérieure de VS Code. Tout fonctionne prêt à l'emploi, sans extension ni configuration supplémentaire.

Lorsque vous pointez sur une fonctionnalité Web dans la dernière version de VS Code, son état de référence s'affiche. Pour vous donner une idée de la durée pendant laquelle la fonctionnalité a été prise en charge, VS Code vous indiquera également l'année où elle est devenue une référence. Pour les fonctionnalités qui ne sont pas encore de référence, il vous indiquera dans quels navigateurs elles ne sont pas encore entièrement implémentées.

Dans les versions précédentes de VS Code, ce n'était pas aussi simple. Il faut un peu de réflexion pour examiner une liste de versions de navigateur compatibles et déterminer quels navigateurs manquent. La partie la moins évidente à déterminer était la durée pendant laquelle la fonctionnalité avait été prise en charge par les navigateurs. Pour cela, vous devez connaître la date de sortie de chaque version, ce qui n'est pas une information très courante. Heureusement, tout cela est pris en compte dans l'état et l'année de référence.

Cette version inclut également une nouveauté. Auparavant, vous ne pouviez afficher que les données de compatibilité des navigateurs pour les propriétés CSS. Cela s'est avéré particulièrement utile compte tenu du rythme incroyable auquel de nouvelles fonctionnalités CSS sont déployées chaque année. Mais il y a aussi beaucoup d'innovations dans le HTML ! À partir de cette version, VS Code commencera également à afficher des informations sur la compatibilité des éléments et attributs HTML avec les navigateurs en termes d'état de référence.

Par exemple, l'attribut d'entrée autocorrect a été déployé dans son premier navigateur, Firefox, il y a quelques mois à peine. Il est agréable de pouvoir obtenir un retour immédiat sur la disponibilité limitée de la fonctionnalité, ce qui vous permet de mieux savoir où elle fonctionnera ou non. Dans ce cas particulier, il est inoffensif dans les navigateurs non compatibles. Alors, n'hésitez pas !

D'autres fonctionnalités HTML, comme l'élément dialog, ne se dégradent pas aussi bien que autocorrect. Il est donc rassurant de pouvoir invoquer la fiche au survol dialog et de constater qu'elle est en fait Baseline depuis 2022 et qu'elle est considérée comme largement disponible dans les principaux navigateurs. Cela devrait vous donner confiance pour adopter des fonctionnalités que vous auriez pu juger trop avant-gardistes.

L'API Popover est un autre exemple de fonctionnalité HTML qui est également devenue de référence, mais seulement depuis 2024. Elle est donc toujours considérée comme "Nouvellement disponible". Cela signifie que, bien qu'il soit compatible avec tous les principaux navigateurs, il n'a pas encore atteint les 2,5 ans requis pour être largement disponible. Vous devez donc faire preuve d'un peu plus de prudence avant de déployer cette fonctionnalité pour tous vos utilisateurs.

Avoir ces informations à portée de main dans VS Code est un excellent moyen de gagner en productivité. Mais que faire si vous n'avez même pas besoin de pointer sur une fonctionnalité pour voir si elle est de base ? Cela est possible grâce à un outil distinct, mais associé : les linters.

Par exemple, l'extension ESLint pour VS Code peut analyser vos fichiers HTML et CSS, et ajouter des soulignements ondulés aux fonctionnalités qui ne sont pas encore dans Baseline. Cette fonctionnalité est basée sur les règles use-baseline récemment ajoutées des plug-ins HTML ESLint et ESLint pour CSS. Il existe également une règle similaire pour Stylelint, si cela vous intéresse. Bien sûr, ce n'est qu'un des nombreux avantages des linters, mais cela montre à quel point ils complètent bien les info-bulles activées par la ligne de base.

Si vous utilisez VS Code, j'espère que vous essayerez les nouvelles fiches informatives. Et si vous n'utilisez pas VS Code, j'ai une très bonne nouvelle à vous annoncer. De nombreux IDE sont des forks de Code - OSS (la version Open Source de VS Code) ou s'appuient sur les mêmes serveurs de langage que ceux qui alimentent ses info-bulles HTML et CSS. La mise à niveau vers la dernière version de ces IDE en aval peut prendre des semaines ou des mois. Toutefois, lorsqu'elle sera effectuée, la nouvelle UI de base devrait être automatiquement héritée :

• VSCodium
• Firebase Studio
• Cursor
• Windsurf
• Zed
• Eclipse Theia
• Trae
• GitHub Codespaces
• Espaces de travail GitLab
• Replit
• StackBlitz (Bolt)

JetBrains s'efforce également d'intégrer Baseline à tous ses IDE basés sur IntelliJ, en commençant par WebStorm. Nous vous en dirons plus dans un prochain article de blog.

De plus en plus d'outils et de ressources pour les développeurs ajoutent la prise en charge de Baseline, et ces nouvelles intégrations d'IDE menées par VS Code sont particulièrement intéressantes. Nous passons tellement de temps dans nos IDE que le fait d'avoir ces données de référence à portée de main nous aidera à apporter encore plus de clarté et de cohérence entre les outils à nos workflows de développement. Pour en savoir plus sur Baseline et d'autres intégrations d'outils comme celle-ci, consultez notre guide Baseline pour obtenir plus de ressources.