[vscode] extension pack 작성 및 배포

이번 포스트에서는 vscode에서 사용되는 extension들을 묶어서 packag로 배포하는 방법에 대해 살펴보자. 내용은 다음 링크를 참조하였다.

https://code.visualstudio.com/api/working-with-extensions/publishing-extension

Publishing Extensions

 

 

환경 설정

 

vsce 설치

vscode의 extension 배포를 위해서는 "Visual Studioi Code Extensions"라는 node 기반의 툴이 필요하다. 필요하다면 다음 명령을 통해 node 및 vsce를 설치하자.

brew install node
npm install -g vsce

vsce --help
Usage: vsce <command>

Options:
  -V, --version                      output the version number
  -h, --help                         display help for command

Commands:
  ls [options]                       Lists all the files that will be published
  package [options] [version]        Packages an extension
  publish [options] [version]        Publishes an extension
  unpublish [options] [extensionid]  Unpublishes an extension. Example extension id: microsoft.csharp.
  ls-publishers                      List all known publishers
  delete-publisher <publisher>       Deletes a publisher
  login <publisher>                  Add a publisher to the known publishers list
  logout <publisher>                 Remove a publisher from the known publishers list
  verify-pat [options] [publisher]   Verify if the Personal Access Token has publish rights for the publisher.
  show [options] <extensionid>       Show extension metadata
  search [options] <text>            search extension gallery
  help [command]                     display help for command

실제 사용할 명령어는 login, publish와 package이다.

 

publisher 계정 생성

 

personal access token 발급

다음으로 할 일은 personal access token을 발급받는 일이다. 이 부분도 문서에 잘 나와있다. 거의 그림만 보고 해도 될 정도다. 
https://code.visualstudio.com/api/working-with-extensions/publishing-extension#get-a-personal-access-token

Publishing Extensions

내용 중에  scopes를 적는 부분이 있는데 그냥 Full access를 적고 가자.  최종적으로 토큰이 발급되는데 자주 사용되니까 어디에 잘 복사해두는 것이 좋다.

 

publisher 생성

다음은 visual studio marketplace publisher management page에서 publisher로 등록하는 일이다.

https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher

Publishing Extensions

publisher로 등록할 때는 name과 ID만 필수 입력 사항이다. 이중 ID는 나중에 extension을 등록할 때 사용되는 아주 중요한 녀석이다.

publisher를 생성하면 현재는 배포된 extension이 없는 상태이다.

 

extension pack 생성 및 배포

 

extension pack 생성

extension pack을 만들 때는 어차피 기존의 extension들을 묶는 역할만 할것이기 때문에 특별히 어려운 일은 없다. 임의의 폴더를 만들고 거기에 package.json 파일을 생성한다.

{
  "name": "frontend-extension-pack",
  "displayName": "frontend 과정에서 사용하는 extension pack",
  "description": "물론 개인 취향에 맞춰서 설치하면 됩니다.",
  "version": "0.0.1",
  "publisher": "quietjun",
  "engines": {
    "vscode": "^1.0.0"
  },
  "extensionPack": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "github.github-vscode-theme",
    "oderwat.indent-rainbow",
    "ritwickdey.liveserver",
    "pkief.material-icon-theme",
    "formulahendry.auto-complete-tag",
    "ecmel.vscode-html-css",
    "pranaygp.vscode-css-peek",
    "christian-kohler.path-intellisense",
    "kisstkondoros.vscode-gutter-preview",
    "hwencc.html-tag-wrapper",
    "moppitz.vscode-extension-auto-import",
    "gruntfuggly.todo-tree"
  ],
  "categories": [
    "Extension Packs"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/quietjun/ssafy-frontend-extension-pack"
  },
  "galleryBanner": {
    "color": "#4A90E2",
    "theme": "dark"
  },
  "bugs": {
    "url": "https://github.com/quietjun/ssafy-frontend-extension-pack/issues"
  },
  "homepage": "https://github.com/quietjun/ssafy-frontend-extension-pack#readme"
}

여기서 publisher는 위에서 등록한 publisher ID를 써주어야 한다.

extensionPack 부분에는 참조할 extension들의 목록을 나열하면 되는데 등록되는 내용은 해당 extension의 identifier로 각 extension 설명 페이지 우측 상단에 있는 installation / identifier의 내용을 참조한다.

categories 부분부터는 옵션이므로 생략해도 상관은 없지만 사용자를 위해 필요한 정보들이다.

 

packaging

이제 VSCE로 packaging을 실행한다.

itsmeyjc@itsmeyjiMacmini extensionpack % vsce package             
(node:9457) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
 WARNING  LICENSE.md, LICENSE.txt or LICENSE not found
Do you want to continue? [y/N] y
 DONE  Packaged: /Volumes/storage/datas/workspace/frontend-extension-pack-0.0.1.vsix (3 files, 1.88KB)

작업의 결과 XX.vsix 파일이 생성된다.

 

publishing

publishing 하기 전에 먼저 login 절차가 필요하다. 이때 앞서 만든 publisher id와 personal access token이 필요하다.

itsmeyjc@itsmeyjiMacmini extensionpack % vsce login quietjun
(node:9705) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher 'quietjun': ************************************************************************************

The Personal Access Token verification succeeded for the publisher 'quietjun'.

 

이제 마지막으로 publish를 처리한다.

itsmeyjc@itsmeyjiMacmini extensionpack % vsce publish
(node:10025) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 INFO  Publishing 'quietjun.ssafy-frontend-extension-pack v0.0.1'...
 INFO  Extension URL (might take a few minutes): https://marketplace.visualstudio.com/items?itemName=quietjun.ssafy-frontend-extension-pack
 INFO  Hub URL: https://marketplace.visualstudio.com/manage/publishers/quietjun/extensions/ssafy-frontend-extension-pack/hub
 DONE  Published quietjun.ssafy-frontend-extension-pack v0.0.1.

 

이제 extension에서 해당 확장팩을 검색해서 설치할 수 있다. (약간의 시간이 필요할 수 있다.)

 

publishing 과정에서 401 오류가 발생한다면 페이지에서 'New extension' 메뉴를 통해 직접 extension을 등록할 수도 있다.