Search

vscode extension으로 DX 향상시키기: open storybook

subtitle
내가 원하는 스토리북만 빠르게 실행할 수 있는 방법!
Tags
dx
test
Created
2025/03/22
2 more properties

배경

우리 팀의 프로젝트는 규모가 크고, Storybook 파일도 많다.
컴포넌트 하나만 확인하고 싶어도 .storybook/main.ts에 정의된 모든 경로가 실행되면서 Storybook 빌드 시간이 길고 무거운 개발 경험으로 이어졌다.

Open Storybook: 원하는 스토리만 빠르게 실행하기

어떻게 하면 개발자가 보고 싶은 스토리만 골라 빠르게 실행할 수 있을까?
동료분들에게 어떻게 해결하는지 여쭤보니, .storybook/main.tsstories 설정을 직접 수정하여 원하는 스토리북만 연다는 얘기를 들었다.
"jest runner처럼 쉽게 특정 Storybook만 실행할 수 없을까?"
그래서 vscode extension으로 이런 기능을 더 쉽게 제공하면 어떨까라는 생각이 들었다.

VSCode Extension으로 자동화하기

핵심 아이디어는 단순하다.
선택한 파일/폴더 기준으로 .storybook/main.tsstories를 수정
스토리북을 실행
종료 시 원래 설정으로 복원
이 모든 과정을 VSCode에서 커맨드 팔레트와 우클릭으로 처리하고 싶었다.

VSCode Extension 만들기

프로젝트 세팅

npm install --global yo generator-code yo code
Shell
복사

개발 및 테스트

1.
cursor가 아닌 vscode를 열어서 개발
2.
커맨드 팔레트(cmd + p)에서 Start Debugging 커맨드를 실행하면 Debugging용 Host 윈도우가 새로 뜬다. 여기서 테스트하고 싶은 프로젝트를 열어서 테스트하면 된다.

주의사항

pnpm X, npm O

vsce에서 pnpm 이슈가 있어서 pnpm이 아닌 npm을 사용한다. 관련 이슈는 여기서 찾아볼 수 있다.
pnpm을 굳이 사용하려면 이 솔루션을 사용하면 된다.

cursor와의 호환성 지키기

cursor에서 vscode와 호환되는 버전이 따로 있으므로 package.json에서 버전을 명시한다. 캐럿(^)이 아니라 고정된 버전을 사용해야 한다.
"engines": { "vscode": "1.93.0" }, "devDependencies": { "@types/vscode": "1.93.0", }
Shell
복사
만약 실수로 호환이 안되는 버전을 올렸다면 unpublish하거나,
vscode extension 설치할 때 install > 톱니바퀴 > insall specific > 호환되는 버전 선택해서 설치하면 된다.

데모

Open Storybook: 스토리북 파일 하나만 실행

커맨드 팔레트에서 “Open Storybook”으로 원하는 스토리북 파일만 실행

Open Stories

폴더 > 우클릭 > Open Stories로 해당 폴더의 모든 스토리북 실행

구현 과정

코드로 기능 확인하기

파일 또는 폴더를 기준으로 가장 가까운 package.json 탐색하여 packageName 추출
모노레포의 경우 여러 패키지에서 스토리북 설정이 되어있으므로 package 별로 스토리북 config를 매핑하기 위해 package name을 추출한다.
// 1️⃣ 가장 가까운 package.json 찾기 → 패키지 이름 가져오기 const packageJsonPath = findNearestPackageJson(focusedDir); if (!packageJsonPath) { vscode.window.showErrorMessage("No package.json found."); return; } const packageName = getPackageName(packageJsonPath); if (!packageName) { vscode.window.showErrorMessage("Could not determine package name."); return; }
TypeScript
복사
package 별로 스토리북 설정을 매핑
stories 항목을 해당 경로로 덮어쓰기
const newStoriesPath = `${focusedDir.replace( /\\/g, "/" )}/**/*.stories.@(js|jsx|ts|tsx)`; if (!packageStoriesMap[packageName].current.includes(newStoriesPath)) { packageStoriesMap[packageName].current.push(newStoriesPath); } // 5️⃣ .storybook/main.ts 업데이트 updateStorybookStories( storybookConfigPath, packageStoriesMap[packageName].current );
TypeScript
복사
스토리북 터미널 열기
터미널이 종료 이벤트 리스너 등록: 스토리북 서버 종료 후 stories 설정 복구
package.json에 등록된 스토리북 실행 스크립트가 있으면 사용
없으면 npx storybook dev 실행

완성된 기능

 커맨드 팔레트 → “Open Storybook” 실행 시 스토리북 파일 하나만 실행 (스토리북 파일이 아니면 실행 안함.)
폴더 우클릭 → "Open Stories" 실행 시 해당 폴더의 스토리북만 실행
여러 번 실행해도 기존 경로 유지하며 새로운 폴더 추가
Storybook 터미널이 종료되면 원래 설정 복원 (Storybook 터미널은 패키지마다 별개로 실행된다.)
.storybook/main.tsmodule.exportsexport default든 관계없이 작동

배포와 설치 방법

배포

1.
package.json에서 version up
2.
vsce publish 실행해서 .vsix 파일 빌드
3.
vscode marketplace에 .vsix 파일 업로드

설치방법

VSCode / Cursor Extension

마켓플레이스에서 roseline-song.open-storybook 검색
설치 후 폴더 우클릭 → "Open Stories" 실행 / 또는 커맨드 팔레트에서 “Open Storybook” 실행
테스트 끝낸 후에는 Storybook 터미널 종료해서 main.ts 경로 복원하기

GitHub 코드

@storybook/cli 자체에서도 공식적으로 이런 기능이 지원되면 좋겠지만, 그 전까지는 이 extension이 유용한 도구가 되었으면 좋겠다.