VSCode-Erweiterung: Open Storybook – nur die gewünschten Storybooks schnell ausführen

Hintergrund

Unser Team hatte beim Starten von Storybook mit Geschwindigkeitsproblemen zu kämpfen.
Mit dem Wachstum des Projekts wurden die Build-Zeiten für das gesamte Storybook immer länger,
und wenn wir nur einen Teil der zu testenden Stories öffnen wollten, mussten wir entweder jedes Mal das komplette Storybook starten oder umständlich die Pfade in .storybook/main.ts anpassen.

Um dieses Problem zu lösen, haben wir die VSCode-Erweiterung „Open Storybook“ entwickelt.
Ähnlich wie bei Jest Runner kann man auch bei Storybook „im Datei-Explorer nur einen bestimmten Ordner auswählen und starten“ oder „die gewünschten Storybook-Dateien auswählen und starten“.

Funktionen

• Ordner → Rechtsklick → Befehl Open Stories: Damit können zusätzlich alle Storybooks in diesem Ordner geöffnet werden.
• Command Palette: Befehl Open Storybook: Wenn bereits per Befehl geöffnete Storybooks vorhanden sind, können bestehende und neue Storybooks zusammen angezeigt werden. (Dasselbe gilt auch, wenn sie über Open Stories geöffnet werden.)
• Monorepo-Verwaltung: Storybook-Terminals werden pro Package separat verwaltet.
• Sucht im script nach dem Storybook-Befehl und führt ihn aus. Wenn keiner vorhanden ist, wird npx storybook ausgeführt.

Installation

• In den Extensions nach roseline-song.open-storybook oder open storybook suchen
• Im Fall von Cursor: Wenn ein Kompatibilitätsfehler mit der VSCode-Version auftritt, auf das Zahnrad neben Install klicken → Install Specific Version → neueste Version installieren

[guseod24]

Version 0.0.5

Zeigt einen Fehler-Toast an, wenn versucht wird, eine Datei, die kein Storybook ist, mit Open Storybook zu öffnen
Behebt das Problem, dass sich der Storybook-Pfad pro Package fortlaufend ansammelt
Stellt main.ts wieder her, wenn das Storybook-Terminal beendet wird