VSCode Extension 만들기

들어가며

최근 코드 저장소를 한번 정리하면서, 예전에 문서내 px단위를 rem으로 변환해주는 vscode 확장 프로그램 vscode-convert-px-to-rem을 만들어 보았던 경험을 되짚어보며 개발 과정을 정리 해보았다. Microsoft에서 도구를 잘 만들어둬서 생각보다 개발을 시작하는 것은 쉽다. 다만 배포시 Azure로 이동하는 것 때문에 약간 헷갈릴 수 있는데 아래에 순서대로 설명해두었으니 그대로 따라하면 무리없이 경험해 볼 수 있을 것 같다.

 

Hello World!

기본적으로 Yeoman이라는 Scaffolding 도구를 사용하며 Yeoman generator를 Microsoft팀에서 미리 만들어두었다. 확장 프로그램을 개발하는데 이 두가지에 대해서 자세히 알 필요는 없다. 다음 명령을 실행하자.

$ npm install -g yo generator-code
$ yo code

그리고 New Extension (JavaScript) 프로젝트로 설정하고 hello-world 프로그램을 만들어본다.

yo code 실행시

$ cd hello-world && code .

vscode가 열리면 hello-world extension을 실행해볼 수 있는데 단순히 F5만 눌리면 된다. 그럼 extention이 적용된 새로운 에디터 창이 열리고 해당 창에서 Cmd + P를 눌려 다음 명령을 수행하면 우측 하단에 "Hello World from hello-world!"가 표시됨을 알 수 있다.

> Hello World

Hello World

동작을 변경하려면 "/extension.js"를 수정한 뒤

1. > Developer: Reload Window를 수행
2. 다시 > Hello World를 해주면
3. 수정사항을 확인 가능하다

뭔가 더 만들어 보고 싶다면 API 레퍼런스를 참고하도록 하고 우선은 배포부터 진행해보자.

배포

1. 우선 https://dev.azure.com 에서 organization을 생성하고
2. Personal Access Token (PAT)를 발급한 뒤 어딘가 메모해놓아야 한다.
3. 그리고 management page 에서 publisher를 먼저 만들자.

package.json에 방금 만든 publisher를 명시해주자.

{
  ...,
  "publisher": "방금만든Publisher명",
  ...
}

 

vsce (Visual Studio Code Extensions)를 설치하고 다음 명령을 실행해주면 배포된다.

$ npm install -g vsce
$ vsce login
$ vsce publish

그럼 management page 에서 배포된 extension을 확인할 수 있고 어느정도 시간이 흐른 후에는 실제로 vscode 내부 마켓 플레이스에서 검색 되어진다.

참고자료

• code.visualstudio.com/api/get-started/your-first-extension
• code.visualstudio.com/api
• github.com/gwanduke/DAILY-GROWTH/blob/master/2019/08/week_04.md