Visual Studio Code unterstützt jetzt Baseline

Rick Viscomi

Veröffentlicht: 20. Mai 2025

Moderne Code-Editoren steigern die Produktivität enorm, da sie die Tools und Referenzdokumente, die Sie für eine effiziente Entwicklung benötigen, an einem Ort vereinen – das ist das „I“ in IDE. Eine Produktivitätssteigerung in vielen IDEs wie Visual Studio Code (VS Code) besteht darin, dass zusätzliche Informationen zu Webfunktionen angezeigt werden, wenn Sie den Mauszeiger im Editor darauf bewegen. Diese Informationen enthalten eine Beschreibung des Features, unterstützte Browser, einen Syntaxleitfaden und einen Link zu weiteren Informationen auf MDN.

Informationen zur Browserkompatibilität sind besonders im Kontext einer IDE nützlich, da Sie sofort Feedback zur Interoperabilität einer Funktion erhalten, indem Sie den Mauszeiger darauf bewegen. Anhand dieser Informationen können Sie entscheiden, ob eine Funktion Ihre Browserunterstützungsziele erfüllt, ob Sie defensive Maßnahmen ergreifen müssen, um sie progressiv zu verbessern oder zu polyfillen, oder ob Sie sie ganz weglassen sollten.

Wenn Sie in früheren Versionen von VS Code den Mauszeiger auf die CSS-Eigenschaft „aspect-ratio“ bewegen, wird die Browserunterstützung in Form von Versionsnummern angezeigt: Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74.
Mit der Maus auf die CSS-Eigenschaft aspect-ratio in früheren Versionen von VS Code zeigen, wobei die Browserunterstützung in Versionsnummern angegeben wird:
„Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74“

In früheren Versionen von VS Code wurden diese Informationen in Form von Browserversionsnummern angegeben, ähnlich wie in Kompatibilitätstabellen auf Websites wie MDN, Can I Use oder hier auf web.dev. Alle diese Websites haben jedoch auch begonnen, die komplexe Landschaft der Browserunterstützung mit Baseline zusammenzufassen. Um VS Code an die Art und Weise anzupassen, wie diese anderen Ressourcen Informationen zur Browserkompatibilität vermitteln, unterstützt VS Code jetzt auch Baseline.

Wenn Sie die neue Baseline-Benutzeroberfläche verwenden möchten, führen Sie ein Upgrade auf VS Code-Version 1.100 oder höher durch. Alles funktioniert sofort – es sind keine Erweiterungen oder zusätzliche Konfigurationen erforderlich.

Wenn Sie in der aktuellen Version von VS Code den Mauszeiger auf die CSS-Eigenschaft „aspect-ratio“ bewegen, wird die Browserunterstützung in Bezug auf Baseline angezeigt: „Widely available across major browsers (Baseline since 2021)“ (Weitgehend in allen wichtigen Browsern verfügbar (Baseline seit 2021)).
Mit der Maus über die CSS-Eigenschaft aspect-ratio in der neuesten Version von VS Code fahren. Die Browserunterstützung wird in Bezug auf Baseline angegeben:
„Widely available across major browsers (Baseline since 2021)“ (Weitgehend in allen wichtigen Browsern verfügbar (Baseline seit 2021))

Wenn Sie in der neuesten Version von VS Code den Mauszeiger auf ein Web-Feature bewegen, wird der Baseline-Status angezeigt. Damit Sie sehen, wie lange die Funktion schon unterstützt wird, wird in VS Code auch das Jahr angezeigt, in dem sie zur Baseline wurde. Bei Funktionen, die noch nicht Baseline sind, wird angegeben, in welchen Browsern die Funktion noch nicht vollständig implementiert ist.

In früheren Versionen von VS Code war das nicht so einfach. Es erfordert etwas Nachdenken, um anhand einer Liste unterstützter Browserversionen herauszufinden, welche Browser fehlen. Am schwierigsten war es vielleicht herauszufinden, wie lange die Funktion in den verschiedenen Browsern unterstützt wird. Dazu müssten Sie wissen, wann die einzelnen Versionen veröffentlicht wurden, was nicht gerade Allgemeinwissen ist. Glücklicherweise wird all das im Baseline-Status und -Jahr berücksichtigt.

Die Kurzinfo für das HTML-Attribut „Eingeschränkte Verfügbarkeit“
Die Kurzinfo für das HTML-Attribut autocorrect für eingeschränkte Verfügbarkeit

Diese Version enthält auch etwas völlig Neues. Bisher konnten Sie nur Daten zur Browserunterstützung für CSS-Properties abrufen. Das war besonders nützlich, da jedes Jahr unglaublich viele neue CSS-Funktionen veröffentlicht werden. Aber auch bei HTML gibt es viele Innovationen. Ab dieser Version werden in VS Code auch Informationen zur Browserunterstützung für HTML-Elemente und ‑Attribute in Bezug auf ihren Baseline-Status angezeigt.

Das Eingabeattribut autocorrect wurde beispielsweise erst vor wenigen Monaten in Firefox, dem ersten Browser, in dem es unterstützt wird, eingeführt. Es ist gut, dass man sofort Feedback zur eingeschränkten Verfügbarkeit der Funktion erhält, damit man besser informiert ist, wo sie funktioniert und wo nicht. In diesem speziellen Fall ist es in nicht unterstützten Browsern harmlos.

Mit dem Mauszeiger auf das HTML-Element des Dialogfelds „Weitgehend verfügbar“ und die Attribute des Pop-overs „Neu verfügbar“ zeigen
Mit der Maus über das HTML-Element „Weitgehend verfügbar“ dialog und die Attribute „Neu verfügbar“ popover fahren

Andere HTML-Funktionen wie das Element dialog werden nicht so elegant zurückgestuft wie autocorrect. Es ist also beruhigend, die dialog-Hovercard aufrufen zu können und zu sehen, dass sie seit 2022 tatsächlich Baseline ist und in allen wichtigen Browsern als weitgehend verfügbar gilt. Das sollte Ihnen die Sicherheit geben, Funktionen zu nutzen, die Sie sonst vielleicht für zu innovativ gehalten hätten.

Die Popover API ist ein weiteres Beispiel für ein HTML-Feature, das auch Baseline ist, aber erst seit 2024. Es gilt also noch als neu verfügbar. Das bedeutet, dass die Funktion zwar von allen wichtigen Browsern unterstützt wird, aber noch nicht die 2,5 Jahre erreicht hat, die für die Verfügbarkeit für alle erforderlich sind. Sie sollten also etwas vorsichtiger vorgehen, bevor Sie diese Funktion für alle Nutzer bereitstellen.

HTML-ESLint-Highlighting, dass die Funktion zur automatischen Korrektur noch nicht Baseline ist, und Unterdrückung dieser Warnung mit einem Kommentar
HTML-ESLint-Highlighting, dass die autocorrect-Funktion noch nicht Baseline ist, und Unterdrücken dieser Warnung mit einem Kommentar

Wenn Sie diese Informationen in VS Code zur Hand haben, können Sie Ihre Produktivität deutlich steigern. Was aber, wenn Sie nicht einmal den Mauszeiger auf eine Funktion bewegen müssten, um zu sehen, ob sie Baseline ist? Das wird durch ein separates, aber verwandtes Tool ermöglicht: Linter.

Mit der ESLint-Erweiterung für VS Code können Sie beispielsweise Ihre HTML- und CSS-Dateien prüfen und alle Funktionen, die noch nicht Baseline sind, mit einer geschlängelten Unterstreichung versehen. Dies wird durch die kürzlich hinzugefügten use-baseline-Regeln aus den Plugins HTML ESLint und ESLint for CSS ermöglicht. Eine ähnliche Regel gibt es auch für Stylelint. Das ist natürlich nur einer von vielen Vorteilen von Lintern, aber es zeigt, wie gut sie die neuen Hovercards mit Baseline-Unterstützung ergänzen.

Wenn Sie VS Code verwenden, probieren Sie die neuen Minikarten doch einmal aus. Und wenn Sie kein VS Code-Nutzer sind, habe ich sehr gute Neuigkeiten. Viele IDEs sind entweder Forks von Code – OSS (der Open-Source-Version von VS Code) oder basieren auf denselben Sprachservern, die die HTML- und CSS-Hovercards unterstützen. Es kann Wochen oder Monate dauern, bis diese nachgelagerten IDEs auf die neueste Version aktualisiert werden. Wenn dies jedoch geschieht, sollte die neue Baseline-UI automatisch übernommen werden:

  • VSCodium
  • Firebase Studio
  • Cursor
  • Windsurfen
  • Zed
  • Eclipse Theia
  • Trae
  • GitHub Codespaces
  • GitLab-Arbeitsbereiche
  • Replit
  • StackBlitz (Bolt)

JetBrains arbeitet auch daran, Baseline in alle IntelliJ-basierten IDEs zu integrieren, beginnend mit WebStorm. Dazu werden wir in einem separaten Blogpost noch mehr sagen.

Immer mehr Entwicklertools und ‑ressourcen unterstützen Baseline. Die neuen IDE-Integrationen, die von VS Code angeführt werden, sind besonders spannend. Wir verbringen so viel Zeit in unseren IDEs. Wenn wir diese Baseline-Daten direkt zur Verfügung haben, können wir unsere Entwicklungs-Workflows noch besser nachvollziehen und die Tools besser aufeinander abstimmen. Weitere Informationen zu Baseline und anderen Tooling-Integrationen wie dieser finden Sie in unserem Baseline-Leitfaden.