vscode 익스텐션을 만들어 보자

https://github.com/blacktoast/super-gen
https://marketplace.visualstudio.com/items?itemName=rettoSea.storybook-gen

기획 동기

스토리북 파일을 따로 다시 만들고 싶지않다

react 와 storybook을 공부하면서 일일히 각 컴포넌트 마다
스토리북 파일을 따로 생성하고, 스니펫을 적는것이 귀찮아서 명령어로 한번에 해결하자, 그리고 propTypes 에 있는 props 들도 한번에 스토리북 args 에 넣어주자 라고 생각해서 시작된 프로젝트입니다. 이후 타입스크립트로 지원을 하자고 생각을 했습니다

그러다 프로젝트에서는 따로 스토리북 파일을 만들지 않았다

팀프로젝트를 하던중,
해당 프로젝트의 폴더구조는 루트 src 폴더에 stories 파일을 넣는것이 아니라
각 컴포넌트 명으로 폴더를 만들고 해당 폴더 안에 파일을 넣는 형태로 변경이 되었습니다 (아래와 같은 형태)

Text(dir)
	- index.js
	- story.jsx	
	- style.jsx

그래서 기존 기능이 크게 필요가 없어졌습니다

그래서 새로운 기능인 컴포넌트명으로 폴더를 만들고 그 아래 파일3개와 각 파일마다 보일러 플레이트를 넣어주는 기능을 추가적으로 하기로 구상 했습니다

그리고 이후 타입스크립트 기반으로 파일을 만들수 있게 구현을 해야겠다고 구상을 했습니다.

구현 방안

먼저 만들고 싶은 컴포넌트 이름으로 폴더를 생성하면 해당 폴더를 만들고
이하에 파일을 3개를 생성한다.

ex> 만약 Text 컴포넌트를 만든다면 아래와 같이 생성한다

Text(dir)
	- index.js
	- story.jsx	
	- style.jsx

그리고 ts을 원할경우 각 파일을 ts로 만들어준다.

이후 story랑 style파일을 원하지 않는다면, 설정값으로 생성을 하지 않게 하고
style파일 경우에도 emotion styled 또는 css 같이 다른 파일 형식을 원한다면
설정을 통해서 다른 파일 스니펫을 사용 할 수 있게 한다.

기대효과

이제 컴포넌트를 폴더로 만든다면 보일러플레이트의 귀찮음은 덜수 있지 않을까