Webview UI Toolkit für Visual Studio Code

11. Oktober 2021 von David Dossett, @david_dossett und Hawk Ticehurst, @hawkticehurst

Wir freuen uns sehr, die öffentliche Vorschau des Webview UI Toolkit für Visual Studio Code ankündigen zu können. Mit diesem Toolkit können Erweiterungsentwickler schnell und einfach Webview-basierte Erweiterungen in Visual Studio Code erstellen, die so aussehen, sich anfühlen und sich verhalten wie der Editor selbst.

Was ist das Webview UI Toolkit?

Im Kern ist das Toolkit eine Bibliothek von Komponenten, die Entwickler zum Erstellen von Benutzeroberflächen innerhalb von Erweiterungs-Webviews verwenden können. Beachten Sie, dass dies unsere Empfehlung, die Verwendung von Webviews zu vermeiden, nicht ändert, es sei denn, Sie benötigen sie unbedingt.

Funktionen der Bibliothek umfassen

• Implementiert die Designsprache von Visual Studio Code: Erstellen Sie Erweiterungen, die ein einheitliches Erscheinungsbild mit dem Rest des Editors haben.
• Automatische Unterstützung für Farbthemen: Alle Komponenten sind auf Theming ausgelegt und zeigen automatisch das aktuelle Editor-Theme an.
• Verwenden Sie jeden Tech-Stack: Die Bibliothek wird als Satz von Webkomponenten ausgeliefert, was bedeutet, dass Entwickler das Toolkit unabhängig davon verwenden können, mit welchem Tech-Stack (React, Vue, Svelte usw.) ihre Erweiterung erstellt wurde.
• Sofort zugänglich: Alle Komponenten werden mit ARIA-Labels und Tastaturnavigation geliefert, die den Webstandards entsprechen.

Warum haben wir es gebaut?

Wir wollten sicherstellen, dass Erweiterungen, die Webviews verwenden, für ihre Benutzer vorhersehbar, konsistent und zugänglich sind.

Jedes Mal, wenn eine Erweiterung die Webview API verwendet, liegt die Verantwortung für die Erstellung von Benutzeroberflächen, die den Webview-Richtlinien entsprechen, beim Erweiterungsautor. Infolgedessen laufen Webviews Gefahr, anders zu erscheinen und sich anders zu verhalten als der Rest von Visual Studio Code. Im schlimmsten Fall müssen Benutzer auf unzugängliche Erweiterungs-Benutzeroberflächen zugreifen, die überhaupt nicht wie der Rest des Editors aussehen.

Mit dem Webview UI Toolkit teilen wir nun einen Teil dieser Verantwortung mit den Erweiterungsautoren. Wir kümmern uns um die Details von Theming, Barrierefreiheit und der Implementierung von Kern-UI-Komponenten in Bezug auf Verhalten und Styling, damit Sie es nicht tun müssen. Das bedeutet verbesserte Entwicklungsfreundlichkeit, verbesserte Entwicklergeschwindigkeit und letztendlich mehr Zeit, um an den Teilen Ihrer Erweiterung zu arbeiten, die sie einzigartig machen!

Wir brauchen Ihr Feedback!

Wir können es kaum erwarten, dass Sie das Webview UI Toolkit ausprobieren! Lassen Sie uns wissen, wie wir die Erfahrung bei der Erstellung von Webview-basierten Erweiterungen verbessern können, während wir auf eine Version 1.0 zusteuern.

Wenn Sie mehr erfahren möchten, können Sie die Dokumentation zum Webview UI Toolkit für Visual Studio Code einsehen. Wenn Sie Fragen haben, auf Probleme stoßen oder Funktionswünsche haben, zögern Sie bitte nicht, sich an uns zu wenden.

Viel Spaß beim Programmieren,

David und Hawk