프론트
VSCode 익스텐션 만들기
ZestLee
2023. 9. 13. 13:25
개요
- 사내에 Storybook 을 도입시키고 싶었으나, 장벽이 있었다
- 러닝커브는 서로 도와가며 하면 되기 때문에 괜찮으나, 귀찮은데 어떻게 해요? 라는 질문에는 대답할 수가 없었다
- 동료들의 귀찮음을 덜기 위해서 VSCode 익스텐션을 만들기로 하였다
yo code 설치
- yo code 를 실행하려면 node, git 이 설치되어 있어야 한다고 함
npm install -g yo generator-code
- 위처럼 yo code 를 실행할 수 있도록 필요한 패키지들을 설치한다
yo code 실행
yo code
- typescript 를 사용할 것이기 때문에, typescript 를 선택해 주었다
패키지를 설치해 주자
npm install
- 필요한 디펜던시들을 설치해 주도록 한다
typescript 컴파일 되도록 스크립트를 실행시켜주자
npm run watch
- 소스가 변경될 때마다 ts 로 컴파일이 되도록 package.json에 추가가 되어있는 watch 스크립트를 실행 시켜주자
실행을 시켜보자
- F5 를 눌러서 실행을 시킨다
- 조금만 기다리면 새로운 VSCode 가 뜨면서 방금 생성한 익스텐션을 사용할 수 있게 된다
익스텐션을 실행해 보자
- 켜진 VSCode 에서 cmd + chilft + p 를 누른 뒤 Hello world 를 입력하여 엔터를 누르면 우측 하단에 Hello world 가 뜬다