[vscode] extension pack 작성 및 배포
- -
이번 포스트에서는 vscode에서 사용되는 extension들을 묶어서 packag로 배포하는 방법에 대해 살펴보자. 내용은 다음 링크를 참조하였다.
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
Publishing Extensions
Learn how to publish Visual Studio Code extensions to the public Marketplace and share them with other developers.
code.visualstudio.com
환경 설정
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
Learn how to publish Visual Studio Code extensions to the public Marketplace and share them with other developers.
code.visualstudio.com
내용 중에 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
Learn how to publish Visual Studio Code extensions to the public Marketplace and share them with other developers.
code.visualstudio.com
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을 등록할 수도 있다.
'tools & libs > IDES' 카테고리의 다른 글
[intellij] JEE 애플리케이션 업데이트 시 자동 반영 (0) | 2024.08.09 |
---|---|
[vscode] 사소한 설정들 (0) | 2024.04.30 |
[eclipse] UI 폰트 크기 (0) | 2023.11.14 |
[vscode] liveserver 실행 시 개발자 도구 활성화하기 (2) | 2023.11.02 |
[IntelliJ]Inspection 수정하기 (0) | 2023.05.29 |
소중한 공감 감사합니다