VSCode 익스텐션 만들기

개요

• 사내에 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 가 뜬다