우당탕탕 vscode extension 제작기
반복되는 함수 선언등을 줄여 생산성을 높이기 위해 사용되는 snippet이라는 기능이 있다.
vscode extension을 검색해보면 여러 종류의 비슷한 extension들이 나오지만 내가 원하는 대로 작동하지 않아 직접 만들기로 했다.
vscode 공식문서를 보면 cra처럼 기본 setup을 설치하는 방법이 나와있다.
yo genearter-code
를 install 하고….
yo code!
성공적으로 create 되었다.
기본적인 구조를 살펴보자 activate 함수가 호출되고 내부에 있는 코드가 실행된다. 작성되어 있는 코드대로라면 vscode에 helloworld를 command로 입력하면 Hello World from MySnippets!
라는 message가 뜰 것이다.
확인해보자
먼저 작업중인 extension의 test를 위해 f5를 누르고 command를 입력한다.
잘 된다.
그럼 이제 snippet을 만들어보자 문법에 맞게 body를 입력한다.
scope
: snippet이 사용될 확장자를 명시해준다.(없어도 괜찮다)body
: 입력될 snippetdescription
: snippet의 설명
snippet을 다 작성했으면 package.json에 언어와 경로를 입력 해준다.
여기서의 language는 snippet이 작동하는 확장자에 영향을 주니 꼭 정확하게 입력해야한다.
확인해보자
잘 되는것을 확인했으니 필요한 snippet을 더 추가하고 git repository에 upload하자
자, 이제 snippet을 모두 작성했으니 배포를 할 차례다.
배포 방법도 vscode 공식문서에서 확인할 수 있다.
문서에 나와있는대로 install 해주고
npm install -f vsce
packing 전에 package.json에 필요한 정보를 입력한다.
"name": "my-snippets",
"displayName": "MySnippets",
"description": "These are actually my snippets, not just my snippets by name.",
"publisher": "JaedeokKim",
"icon": "static/img/cat.png",
"version": "1.0.0",
"engines": {
"vscode": "^1.65.0"
},
"repository": {
"type": "git",
"url": "https://github.com/jdcoder27/my-snippets#ifce---import-fc- functional-component-export-default"
},
name
: extension의 이름displayName
: market에 표시될 이름description
: extension의 설명publisher
: market에서 create한 publisher의 id (우선 빈칸으로 두자)icon
: market에 표시될 아이콘version
: extension의 versionengines.vscode
: vscode의 호환성 버전repository.url
: snippet을 upload한 git repository 주소
배포에는 3가지가 필요하다
- upload할 extension package
- marcket place publisher name
- personal access tocken
우선, package의 root directory에서 packaging 명령어를 입력해서 package file을 만든다.
vsce package // will create [extension-name]-[version].vsix
이제 market에 가서 publish extensions를 click하고 login을 하고
계정이 없다면 계정을 만든다.
그리고 publisher를 create 하게 되는데 두 가지를 입력한다.
name
: market에 배포한 extension에 보여질 publisher nameid
: package.json에 입력되는 publisher
마지막으로 Azure Devops에서 organization과 project를 만들고 personal access token을 만든다.
이때, Organization을 반드시 All accessible organizations
로 한다.
create하고 나온 popup에서 tocken을 copy 해두자
이제 모든 준비가 끝났다. cli로 login command를 입력하고
publisher name, personal access token을 입력한다.
그리고 publish 해주자
vsce publish
(이 방법으로 publish가 어렵다면 vsix
file을 바로 업로드 할 수 있다.)
upload 되었다!
upload되면 검수 과정을 거치는데 시간이 약간 지난 후에 알림 email과 함께 market에서 검색할 수 있게 된다.
검색이 잘 된다.
설치 후 사용해보면 잘 작동한다.
이제 일 할 시간이다.