ส่วนขยาย VSCode: Open Storybook – รันเฉพาะ Storybook ที่ต้องการได้อย่างรวดเร็ว

ที่มา

ทีมของเราประสบปัญหาเรื่องความเร็วเวลารัน Storybook
เมื่อโปรเจกต์ใหญ่ขึ้น เวลา build Storybook ทั้งหมดก็นานขึ้นเรื่อย ๆ และแม้อยากเปิดแค่บาง story เพื่อทดสอบ ก็ต้องรัน Storybook ทั้งหมดทุกครั้ง หรือไม่ก็ต้องคอยแก้ path ใน .storybook/main.ts ซึ่งไม่สะดวก

เพื่อแก้ปัญหานี้ เราจึงสร้างส่วนขยาย VSCode ชื่อ "Open Storybook" ขึ้นมา
เหมือนกับ Jest Runner คือทำให้ Storybook สามารถ "เลือกเฉพาะโฟลเดอร์จาก file explorer แล้วรัน" หรือ "เลือกไฟล์สตอรี่บุ๊กที่ต้องการแล้วรัน" ได้

ฟีเจอร์

• โฟลเดอร์ - คลิกขวา - คำสั่ง Open Stories: สามารถเปิด Storybook ทั้งหมดในโฟลเดอร์นั้นเพิ่มได้
• Command Palette: คำสั่ง Open Storybook: หากมี Storybook ที่เปิดไว้ด้วยคำสั่งอยู่แล้ว จะสามารถดูรวมทั้งของเดิมและของใหม่ได้ (ถ้าเปิดด้วย Open Stories ก็จะถูกรวมเหมือนกัน)
• การจัดการ monorepo: แยกจัดการเทอร์มินัล Storybook ตามแต่ละแพ็กเกจ
• ค้นหาคำสั่ง storybook จากใน script แล้วนำมารัน หากไม่มีจะรันด้วย npx storybook

การติดตั้ง

• ค้นหา roseline-song.open-storybook หรือ open storybook ใน extension
• กรณีใช้ Cursor: หากเกิด error เรื่องความเข้ากันได้ของเวอร์ชัน VSCode ให้คลิกปุ่มรูปเฟืองข้าง install - install specific version - ติดตั้งเวอร์ชันล่าสุด

[guseod24]

เวอร์ชัน 0.0.5

แสดงเออร์เรอร์โทสต์เมื่อพยายามเปิดไฟล์ที่ไม่ใช่ Storybook ด้วย Open Storybook
แก้ไขปัญหาที่พาธ Storybook ของแต่ละแพ็กเกจถูกสะสมเพิ่มขึ้นเรื่อย ๆ
กู้คืน main.ts เมื่อปิดเทอร์มินัลของ Storybook