VSCode Extension 개발

VSCode Extension 개발에 대해 간단히 적어보려고 한다.

 

 VSCode Extension 개발에서 VS Code Extension API를 이용하여 VSCode의 기본 기능들과 연동하여 개발이 가능하다.

 

VSCode Extension API 종류는 VSCode API 공식 문서를 확인하면 좋으나 해당 사이트가 가끔 제대로 열리지 않는 경우가 있어 관련 문서들을 참조한다.

https://medium.com/frontend-developers/vs-code-extension-api-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-f1cb0ed89770

 

VSCode Extension 개발의 경우 vue.js, react 등을 활용해서 개발이 가능하다.

단 위사항들을 이용해서 개발을 하기 위해서는 Electron에 대해서 알아야 한다.

https://www.codemag.com/article/2107071

 

일렉트론에 대해서 알기 위해서는 아래를 참조한다.

https://velog.io/@ckstn0777/Electron%EC%9D%BC%EB%A0%89%ED%8A%B8%EB%A1%A0-%EC%9D%B4%EB%9E%80

 

VSCode의 경우 electron으로 개발되어져 있다고 알려져 있다. (slack, atom 등도 동일)

Electron의 특징

1. Web 기술: chromium과 Node.js를 사용하여 HTML, CSS 그리고 Javascript를 이용해 Application을 만들수 있도록 한다.(react, angular, vuejs 지원)

2. 오픈 소스: Github가 관리하는 오픈소스 프로젝트다

3. 크로스 플랫폼: Mac, Windows, Linux와 호환되며, Electron Application은 3개의 플랫폼에서 빌드되고 동작한다.

 

VSCode Extension 개발 주요 과정

1. 모든 Webview들은 VSCode Command를 이용하여 Open된다.

2. Webview의 화면 UI들은 다른 일반적인 Web page들과 동일하게 동작한다.

3. Webview에서 VSCode의 기능들을 사용하기 위해서는  bridge가 필요하며 command 호출시에는 sendMessage를 통해 해당 Command를 호출한다.

4. VSCode에서 제공하는 Command 및 Custom Command를 새로 작성 또는 변경 작성이 가능하며 이는 Webview에서 bridg를 통해 호출이 가능하다.

 

현재 VSCode 내에 내재된 이슈들

1. 첫번째 Project를 삭제시 VSCode Extension이 강제 종료 되고 새로 activate 됩니다. (Known 이슈)

2. 일부 VSCode Extension API가 동작을 잘 안합니다.(ex. webview 저장 및 재 open)

 

해당 프로젝트에 대한 사항을 간단하게 기록으로 남긴다.(프로젝트 규정)

1. 한 Module에 대한 현장 관리자 - 약 6개월

- 한 VSCode Extension에 대한 현장 관리자 롤을 수행했다.

-  고객- 나 - 개발 인력 간의 소통의 중간다리 롤을 수행하면서 서로간의 미스를 최대한 줄여보려고 노력했다.

- 처음으로 관리자 직함을 받아서 개발적인 문제도 문제지만 소통 문제에도 어려움이 많았다. 물론 개발도 놓지 않은 상태이기 때문에 개발도 열심히 진행하려고 했다.

2. Vue와 Electron 기반 Project에 기여 - 1년 ( 현장 관리자 기간 포함)

- VSCode Extension에 대한 개발을 진행하면서 Vue를 접할 수 있었다.

- 개발적으로는 크게 차이가 없어서 React 위주의 프로젝트만 경험했던 나로써는 적응하는 시간만 확보되면 언어적인 이슈는 크게 없었다.

- Native Frontend가 아닌 Web Frontend의 하나의 Extension 개발을 경험하였다.

- 이미 개발된 여러 module들을 확인하고 이를 발전시키는데 기여하였다.

 

<느낀점>

* 현장 관리자라는 업무에 대해 스트레스를 많이 받았지만 또다른 자극이 되었다.

* VSCode Extension과 Vue 등을 이용하며 개발을 하면서 힘이 많이 들었지만 Tizen Studio 개발때의 기억이 되살아나고 좋았다.