우당탕탕 vscode extension 제작기

Published in

aaant

7 min readMar 27, 2022

반복되는 함수 선언등을 줄여 생산성을 높이기 위해 사용되는 snippet이라는 기능이 있다.
vscode extension을 검색해보면 여러 종류의 비슷한 extension들이 나오지만 내가 원하는 대로 작동하지 않아 직접 만들기로 했다.

vscode 공식문서를 보면 cra처럼 기본 setup을 설치하는 방법이 나와있다.

https://code.visualstudio.com/api/get-started/your-first-extension

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: 입력될 snippet
description: snippet의 설명

snippet을 다 작성했으면 package.json에 언어와 경로를 입력 해준다.
여기서의 language는 snippet이 작동하는 확장자에 영향을 주니 꼭 정확하게 입력해야한다.

확인해보자

잘 되는것을 확인했으니 필요한 snippet을 더 추가하고 git repository에 upload하자

자, 이제 snippet을 모두 작성했으니 배포를 할 차례다.
배포 방법도 vscode 공식문서에서 확인할 수 있다.

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

문서에 나와있는대로 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의 version
engines.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 name
id : package.json에 입력되는 publisher

마지막으로 Azure Devops에서 organization과 project를 만들고 personal access token을 만든다.
이때, Organization을 반드시 All accessible organizations로 한다.
create하고 나온 popup에서 tocken을 copy 해두자