8 points par guseod24 2025-03-12 | 1 commentaires | Partager sur WhatsApp

Contexte

Notre équipe rencontrait des problèmes de lenteur au moment d’exécuter Storybook.
À mesure que le projet grandissait, le temps de build complet de Storybook s’allongeait progressivement,
et il était contraignant de devoir lancer tout le Storybook à chaque fois ou de modifier les chemins dans .storybook/main.ts alors que nous voulions seulement ouvrir une partie des stories à tester.

Pour résoudre ce problème, nous avons créé une extension VSCode appelée "Open Storybook".
Comme avec Jest Runner, Storybook peut ainsi être lancé en « sélectionnant uniquement un dossier précis dans l’explorateur de fichiers » ou en « sélectionnant le fichier Storybook souhaité pour l’exécuter ».

Fonctionnalités

  • Dossier - clic droit - commande Open Stories : permet d’ouvrir en plus tous les Storybooks présents dans ce dossier.
  • Palette de commandes : commande Open Storybook : s’il existe déjà des Storybooks ouverts via la commande, vous pouvez voir ensemble les Storybooks existants et les nouveaux. (De la même façon, ceux ouverts avec Open Stories sont également fusionnés.)
  • Gestion du monorepo : les terminaux Storybook sont gérés séparément pour chaque package.
  • Recherche et exécution de la commande storybook dans les scripts ; si elle n’existe pas, exécution via npx storybook.

Installation

  • Dans les extensions, recherchez roseline-song.open-storybook ou open storybook
  • Dans le cas de Cursor : si une erreur de compatibilité de version VSCode se produit, cliquez sur le bouton en forme d’engrenage à côté de install - install specific version - installez la version la plus récente

1 commentaires

 
guseod24 2025-03-13

Version 0.0.5

Affiche un message d’erreur si l’on essaie d’ouvrir avec Open Storybook un fichier qui n’est pas un Storybook
Correction d’un problème où les chemins Storybook par package continuaient de s’accumuler
Restauration de main.ts à la fermeture du terminal Storybook