VS Code Extension을 개발하고 배포하는 방법

Source: Dev.to

안녕하세요! 저는 일본에서 일하는 소프트웨어 엔지니어이며, 오늘은 VS Code 확장 기능을 개발하고 VS Code Marketplace에 배포한 경험을 공유하고자 합니다.

이 글에서 다룰 내용:

• VS Code 확장 프로젝트를 설정하고 배포하기까지의 전체 흐름.
• 확장 기능 자체의 구현 세부 사항 (간략한 개요).
• 제가 만든 확장 기능의 짧은 데모 – 사이드 패널을 돌아다니는 귀여운 캐릭터들, 잠깐의 휴식에 딱 맞습니다.

1. 사전 요구 사항

다음 도구들이 머신에 설치되어 있는지 확인하세요:

2. 새 확장 프로그램 스캐폴드

VS Code는 공식 Yeoman 생성기(generator-code)를 제공합니다. 두 가지 방법으로 사용할 수 있습니다.

옵션 1 – npx 로 실행 (전역 설치 없이)

npx --package yo --package generator-code -- yo code

옵션 2 – 전역 설치

npm install --global yo generator-code
yo code

명령을 실행하면 대화형 프롬프트가 열립니다. 아래는 마법사의 예시입니다:

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

✔ What type of extension do you want to create? New Extension (TypeScript)
✔ What's the name of your extension? hello-vscode-world
✔ What's the identifier of your extension? hello-vscode-world
✔ What's the description of your extension? 
✔ Initialize a git repository? Yes
✔ Which bundler to use? unbundled
✔ Which package manager to use? npm
✔ Do you want to open the new folder with Visual Studio Code? Open with `code`

프롬프트에 답변하면 hello-vscode-world 라는 폴더가 생성됩니다:

hello-vscode-world/
├── CHANGELOG.md
├── eslint.config.mjs
├── node_modules/
├── package-lock.json
├── package.json
├── README.md
├── src
│   ├── extension.ts
│   └── test
├── tsconfig.json
└── vsc-extension-quickstart.md

위와 같은 구조가 보이면 스캐폴드가 완료된 것이며 코딩을 시작할 수 있습니다.

3. vsce 로 퍼블리싱

vsce (Visual Studio Code Extension)는 확장 프로그램을 패키징하고 퍼블리싱하기 위한 공식 CLI입니다.

vsce 설치

npm install -g @vscode/vsce

3.1 개인 액세스 토큰(PAT) 만들기

1. Azure DevOps에 로그인합니다(조직이 없으면 새로 만드세요).
2. User Settings → Personal Access Tokens → + New Token 로 이동합니다.
3. 필드를 입력합니다:

4. Create를 클릭하고 생성된 토큰을 복사합니다(다시 볼 수 없습니다).

3.2 퍼블리셔 만들기

1. VS Code Marketplace Publisher Management 페이지로 이동합니다.
2. PAT에 사용한 동일한 Microsoft 계정으로 로그인합니다.
3. Create publisher를 클릭하고 입력합니다:

4. Create를 클릭하고 퍼블리셔 계정을 확인합니다.

3.3 터미널에서 로그인

vsce login "your-publisher-id"

프롬프트가 나타나면 앞서 만든 PAT를 붙여넣습니다. 로그인에 성공하면 다음과 같이 출력됩니다:

The Personal Access Token verification succeeded for the publisher "your-publisher-id".

이제 퍼블리싱 설정이 완료되었습니다.

4. 게시를 위해 준비할 파일

These files ensure your extension is displayed correctly and is easy to maintain.

5. 확장 프로그램 패키징

프로젝트 폴더 안에서 다음 명령을 실행합니다:

vsce package

모든 것이 정상이라면 .vsix 파일이 생성됩니다. 예시:

hello-vscode-world-0.0.1.vsix
├─ [Content_Types].xml
├─ extension.vsixmanifest
└─ extension/
   ├─ changelog.md
   ├─ package.json
   ├─ readme.md
   └─ out/
      ├─ extension.js
      └─ test/
         └─ extension.test.js

.vsix 아카이브는 단순히 zip 파일이므로, 내용을 확인하려면 검사할 수 있습니다.

6. Publish the Extension

vsce publish

or, to publish a specific version:

vsce publish 1.2.3

After a short upload, your extension will be live on the VS Code Marketplace.

7. 추가 읽을거리

• VS Code Extension API – 확장 기능을 만드는 공식 문서.
• Extension Manifest Reference – package.json의 필수 및 선택 필드에 대한 상세 정보.

데모

아래는 사이드 패널을 돌아다니는 귀여운 캐릭터들을 보여주는 짧은 GIF(또는 비디오)입니다. (여기에 데모 미디어를 삽입하세요.)

자신만의 확장 기능을 만들면서 즐거운 코딩 되세요!

패키지 내용 확인

다음 명령을 실행하여 패키징될 파일 목록을 확인합니다:

vsce ls --tree

예시 출력:

hello-vscode-world-0.0.1.vsix
├─ CHANGELOG.md
├─ README.md
├─ package.json
└─ out/
   ├─ extension.js
   └─ test/
      └─ extension.test.js

이 단계는 불필요한 파일이 포함되지 않았는지 확인하는 데 도움이 됩니다.

확장 프로그램 게시하기

확장 프로그램을 게시하는 방법은 두 가지가 있습니다.

1. Marketplace UI를 통한 업로드

1. VS Code Marketplace 게시자 관리 페이지로 이동합니다.
2. New Extension → Visual Studio Code 를 클릭합니다.
3. 생성된 .vsix 파일을 업로드합니다.

2. CLI에서 직접 게시하기

vsce publish

게시가 성공하면 다음과 같은 출력이 표시됩니다:

DONE  Published XXXXX vX.Y.Z.

Marketplace 관리 페이지에서 게시 상태를 확인할 수 있습니다. Version 열에서 상태가 verifying에서 실제 버전 번호로 변경되면 릴리스가 완료된 것입니다.

vsce package vs. vsce publish

두 명령은 몇 가지 공통 단계를 공유합니다:

• package.json에 정의된 scripts.vscode:prepublish 실행.
• .vscodeignore를 기준으로 포함할 파일 결정.
• 확장을 .vsix 파일로 번들링.

vsce package

• 로컬에서 .vsix 파일을 생성합니다.
• 유용한 경우:
  • 브라우저에서 직접 게시할 때.
  • 마켓플레이스 외부에 확장 파일을 공유할 때.
  • 패키징된 내용을 검사할 때.

vsce publish

• .vsix 파일을 생성하고 즉시 VS Code 마켓플레이스에 확장을 게시합니다.

마무리 생각

이 글에서는 VS Code 확장 프로그램을 만들고 배포하는 과정을 살펴보았습니다. 예상보다 훨씬 매끄럽게 진행돼서 기분 좋은 놀라움이었습니다!

관심이 있으시다면, 제 확장 프로그램 Kawaii Terrarium을 확인하고 직접 사용해 보세요.

관련 주제

• VSCode – 첫 번째 확장 프로그램
• VSCode – 확장 매니페스트
• VSCode – 확장 프로그램 게시
• VSCode – 확장 API