[VSCE] VSCode EXTENSION PUBLISH

Visual Studio Code 확장팩을 만들게 된 계기

 

코드 리뷰를 하거나 인터넷 검색을 할 때, ChatGPT를 활용할 때, 여러 파일에 나눠져 있는 코드를 공유해야 하는 경우 어떤 파일의 코드인지 따로 주석으로 표시하는 것이 불편했습니다.

 

그래서 코드를 복사하면 해당 파일의 폴더 경로가 주석 처리 되어 함께 복사할 수 있는 확장팩을 개발하고자 했습니다.

 

1. VSCode Extension 을 개발하기 위해서 해당 개발 도구를 설치

sudo npm install -g yo generator-code

2. 다음 명령어를 통해 개발 도구를 실행

yo code

3. 개발할 확장팩에 대한 질문들을 답하고, 해당 프로젝트 폴더 엶

        > 저는 New Extension (TypeScript) 로 선택했습니다.

4. 구현하고자 하는 기능은 extension.ts 파일 안에 구현

(링크 참고)

5. (선택) Extension.ts 파일 debugging 을 통해 테스트

6. package.json 에서 "publisher", "repository" 를 추가하여 개발자 본인을 칭할 이름과, 확장팩 코드를 저장한 깃허브 레포지토리를 저장

7. LICENSE.txt 를 추가하여 라이선스 정책 적용

8. README.md 에서 가이드라인을 따라 확장팩 설명 기재

 

#4 ~ #8의 과정은 아래 링크를 참고

(링크 예정)

 

9. vsce 명령어 접근을 위해 다음 링크의 과정을 통해 personal access tokens 를 발급

https://code.visualstudio.com/api/working-with-extensions/publishing-extension#get-a-personal-access-token

 

10. #9의 과정에서 발급 받은 personal access tokens 를 활용하여 본인 인증

vsce login 본인_publisher_이름

https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher '본인_publisher_이름':

# 인증 성공 시
The Personal Access Token verification succeeded for the publisher 'monte'.

11. 확장팩을 배포하기 전 패키지 vsce 확장팩 관리 도구를 설치

sudo npm install -g vsce

12. vsce 를 활용하여 확장팩 패키지로 묶기

vsce package

13. vsce 를 활용하여 VSCode marketplace 에 확장팩 배포

vsce publish

#6 ~#8의 과정을 생략할 시, #12의 과정에서 경고가 발생할 수 있습니다.

 

https://marketplace.visualstudio.com/manage/publishers 에서 배포한 확장팩을 확인하실 수 있습니다.

---

참고 자료

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

https://minwook-shin.github.io/create-vscode-extension/

---

기준일자: 2023년 10월 05일

문제가 되거나 정정해야할 내용이 있다면 댓글로 작성 부탁드립니다!