Show GN: VSCode extension: Open Storybook – 원하는 Storybook만 빠르게 실행하기

배경

저희 팀은 Storybook을 실행할 때 속도 문제를 겪고 있었습니다.
프로젝트가 커지면서 Storybook의 전체 빌드 시간이 점점 길어졌고,
테스트할 스토리 일부만 열고 싶은데 매번 전체 Storybook을 실행하거나 .storybook/main.ts에서 경로를 수정하는 불편함이 있었습니다.

이를 해결하기 위해, VSCode 익스텐션인 "Open Storybook"을 만들었습니다.
Jest Runner처럼 Storybook도 "파일 탐색기에서 특정 폴더만 선택해서 실행" 또는 "원하는 스토리북 파일 선택해서 실행"할 수 있도록 했습니다.

기능

• 폴더 - 우클릭 - Open Stories 커맨드: 해당 폴더 안의 모든 스토리북을 추가로 열 수 있습니다.
• 커맨드 팔레트: Open Storybook 커맨드: 커맨드로 열어둔 스토리북이 있으면 기존 + 새 스토리북을 합쳐서 볼 수 있습니다. (Open Stories로 열어도 마찬가지로 합쳐집니다.)
• 모노레포 관리: 패키지 별로 스토리북 터미널 따로 관리합니다.
• script에서 storybook 커맨드를 찾아서 실행합니다. 없으면 npx storybook으로 실행합니다.

설치

• extension에서 roseline-song.open-storybook or open storybook 검색
• cursor의 경우: vscode 버전 호환성 에러가 발생한다면, install 옆의 톱니바퀴 버튼 클릭 - install specific version - 최신 버전 설치