Code Snippets, Coloring und Theme Cheat Sheet

Base Web: Uber veröffentlicht Erweiterung für Visual Studio Code
Keine Kommentare

Für Visual Studio Code ist eine neue Erweiterung von Ubers Open Source Toolkit Base Web verfügbar. Neben einem Code Snippet Generator für React View sind auch neue Shortcuts für die Dokumentation enthalten.

Für Visual Studio Code ist eine Erweiterung des Toolkits Base Web aus dem Hause Uber erschienen. Sie umfasst neben einigen neuen Features im Kern vor allem einen Code Snippet Generator für React View.

Web Base: React View Code Snippets und Theme Cheat Sheet

Das neue Snippets-Feature soll das Einfügen von häufig verwendeten Code-Abschnitten erleichtern, etwa Loops oder Conditional Statements. So ist es mit den vorgefertigten Snippets nun möglich, einzelne React-Komponenten auszuwählen, zu modifizieren und schließlich in den existierenden Code einzufügen.

Base Web Extension VS Code

Quelle: Base Web

Die Erweiterung zu VS Code beinhaltet jeweils zwei Snippets für jede Base-Web-Komponente: ein Import Statement und eins für die Komponente selbst. Für die Definition dieser Snippets verwendet Web Base eine eigene, spezielle Grammatik und nutz als Basis bereits bestehenden React-View-Komponenten.

Bei der Nutzung der Component Library und des Design Systems von Web Base muss oft auf die Desgin-Tokens und einzelnen Farben verwiesen werden. Hierfür wurden nun visuelle Hinweise implementiert, zu welchen Farben die Variablen führen werden. Diese werden farblich unterstrichen dargestellt:

Base Web Extension VS Code2

Quelle: Base Web

Theme Cheat Sheet und Documentation Shortcuts

Im Bereich der Dokumentation gab es gleich zwei Neuerungen, die das Leben von Entwicklern erleichtern sollen. Zum einen kann mit der nun erschienenen Erweiterung per Shortcut in der Dokumentation nach den einzelnen Web-Base-Komponenten gesucht werden. Zum anderen gibt das neue Theme Cheat Sheet nun auf einen Blick Auskunft über Aspekte wie Größen, Fonts, etc. Geöffnet werden kann es mit dem Befehl Base Web: Open theme cheat sheet in der Command Palette.

Alle Informationen zur neuen Erweiterung von Base Web für Visual Studio Code finden sich auf der offiziellen Webseite.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -