UX-Richtlinien
Diese Richtlinien behandeln die Best Practices für die Erstellung von Erweiterungen, die sich nahtlos in die native Benutzeroberfläche und die Muster von VS Code integrieren. In diesen Richtlinien finden Sie
- Eine Übersicht über die allgemeine UI-Architektur und -Elemente von VS Code
- Empfehlungen und Beispiele für von einer Erweiterung beigesteuerte UI
- Links zu relevanten Anleitungen und Beispielen
Bevor wir uns mit den Details befassen, ist es wichtig zu verstehen, wie die verschiedenen architektonischen UI-Teile von VS Code zusammenpassen und wie und wo Ihre Erweiterung beitragen kann.
Container
Die VS Code-Oberfläche kann grob in zwei Hauptkonzepte unterteilt werden: Container und Elemente. Im Allgemeinen können Container als die größeren Abschnitte der VS Code-Oberfläche betrachtet werden, die ein oder mehrere Elemente rendern
Aktivitätsleiste
Die Aktivitätsleiste ist eine zentrale Navigationsfläche in VS Code. Erweiterungen können Elemente zur Aktivitätsleiste beitragen, die als Ansichtscontainer fungieren und Ansichten in der primären Seitenleiste rendern.
Primäre Seitenleiste
Die primäre Seitenleiste rendert eine oder mehrere Ansichten. Die Aktivitätsleiste und die primäre Seitenleiste sind eng miteinander verbunden. Das Klicken auf ein beigesteuertes Element der Aktivitätsleiste (d. h. Ansichtscontainer) öffnet die primäre Seitenleiste, in der eine oder mehrere Ansichten angezeigt werden, die mit diesem Ansichtscontainer verknüpft sind. Ein konkretes Beispiel ist der Explorer. Das Klicken auf das Explorer-Element öffnet die primäre Seitenleiste, in der die Ordner, die Zeitachse und die Gliederungsansichten sichtbar sind.
Sekundäre Seitenleiste
Die sekundäre Seitenleiste dient ebenfalls als Oberfläche für das Rendern eines Ansichtscontainers mit Ansichten. Benutzer können Ansichten wie Terminal oder Probleme in die sekundäre Seitenleiste ziehen, um ihr Layout anzupassen.
Editor
Der Editorbereich enthält eine oder mehrere Editor-Gruppen. Erweiterungen können benutzerdefinierte Editoren oder Webviews beitragen, die im Editorbereich geöffnet werden. Sie können auch Editor-Aktionen beitragen, um zusätzliche Symbol-Schaltflächen in der Editor-Symbolleiste anzuzeigen.
Panel
Das Panel ist ein weiterer Bereich für die Anzeige von Ansichtscontainern. Standardmäßig können Ansichten wie Terminal, Probleme und Ausgabe gleichzeitig in einem einzigen Tab im Panel angezeigt werden. Benutzer können auch Ansichten in ein geteiltes Layout ziehen, ähnlich wie im Editor. Darüber hinaus können Erweiterungen Ansichtscontainer speziell dem Panel anstelle der Aktivitätsleiste/primären Seitenleiste hinzufügen.
Statusleiste
Die Statusleiste liefert kontextbezogene Informationen über den Arbeitsbereich und die aktuell aktive Datei. Sie rendert zwei Gruppen von Statusleisten-Elementen.
Elemente
Erweiterungen können Elemente zu den oben aufgeführten verschiedenen Containern hinzufügen.
Ansicht
Ansichten können in Form einer Baumansicht, Willkommensansicht oder Webview-Ansicht beigesteuert und in andere Bereiche der Benutzeroberfläche gezogen werden.
Ansichts-Symbolleiste
Erweiterungen können Ansicht-spezifische Aktionen bereitstellen, die als Schaltflächen in einer Ansichts-Symbolleiste angezeigt werden.
Seitenleisten-Symbolleiste
Aktionen, die für einen gesamten Ansichtscontainer gelten, können auch in der Seitenleisten-Symbolleiste angezeigt werden.
Editor-Symbolleiste
Erweiterungen können Editor-Aktionen beitragen, die für einen Editor direkt in der Editor-Symbolleiste gelten.
Panel-Symbolleiste
Die Panel-Symbolleiste kann Optionen anzeigen, die für die aktuell ausgewählte Ansicht gelten. Zum Beispiel zeigt die Terminal-Ansicht Aktionen zum Hinzufügen eines neuen Terminals, zum Teilen des Ansichts-Layouts und mehr an. Der Wechsel zur Probleme-Ansicht zeigt einen anderen Satz von Aktionen an.
Statusleisten-Element
Links sind Statusleisten-Elemente für den gesamten Arbeitsbereich bestimmt. Rechts sind Elemente für die aktive Datei bestimmt.
Gemeinsame UI-Elemente
Befehlspalette
Erweiterungen können Befehle beitragen, die in der Befehlspalette erscheinen, um schnell eine Funktionalität auszuführen.
Schnellauswahl
Schnellauswahlen erfassen die Eingabe eines Benutzers auf verschiedene Arten. Sie können eine einzelne Auswahl, mehrere Auswahlen oder sogar freie Texteingabe abfragen.
Benachrichtigungen
Benachrichtigungen werden verwendet, um Benutzern Informations-, Warn- und Fehlermeldungen zu übermitteln. Sie können auch verwendet werden, um den Fortschritt anzuzeigen.
Webviews
Webviews können verwendet werden, um benutzerdefinierte Inhalte und Funktionalitäten für Anwendungsfälle anzuzeigen, die über die "native" API von VS Code hinausgehen.
Kontextmenüs
Im Gegensatz zur konsistenten Position der Befehlspalette ermöglichen Kontextmenüs dem Benutzer, Aktionen auszuführen oder etwas von einer bestimmten Stelle aus zu konfigurieren.
Walkthroughs
Walkthroughs bieten eine konsistente Erfahrung für die Einarbeitung von Benutzern in eine Erweiterung über eine mehrstufige Checkliste mit reichhaltigen Inhalten.
Einstellungen
Einstellungen ermöglichen es Benutzern, Optionen zu konfigurieren, die für die Erweiterung relevant sind.
