VS Code에는 Extension이라고 하는 플러그인 시스템이 있다. 마켓에 등록된 그 수는 2만개가 넘으며 하루에도 수십 개의 새로운 Extension이 등록되고 있다. 그 종류로는 데이터 사이언스, 디버거, GIT 유틸리티, 언어별 스니펫과 포맷터, 린트, 코드 어시스턴트, 머신러닝, 테스트, 빌드, 컬러 테마 등 VS Code가 단순 에디터 그 이상의 IDE로 칭할 수 있을만큼 다양하고 편리한 기능들을 제공한다.
이것을 가능케 한 것이 바로 확장가능한 VS Code 시스템이다. VS Code는 설계부터 애초에 확장성을 염두하였다고 한다. 에디터의 컬러 테마/아이콘, 커스텀 UI, 웹뷰 확장, 프로그래밍 언어 확장 등 VS Code 거의 대부분 UI나 기능을 Extension API를 통해 개발하거나 추가할 수 있다.
Extension을 개발할 때 기본적으로 알아야 할 activation event, contribution point, vs code api의 개념들과 VS Code의 UI 구조/용어를 살펴본다.
Activation Events
어떤 상황이 발생할 때 어떤 이벤트를 활성화할지 정의한다. 여기서 다음과 같은 상황들에 대한 처리가 가능하다. (이벤트 전체 목록)
onLanguage: 특정 언어로 해석되는 파일이 열렸을 때onCommand: 특정 명령어가 실행 되었을 때onDebug: 디버그 세션이 시작되었을 때workspaceContains: 특정 폴더가 열렸을 때onFileSystem: 특정 scheme의 파일이나 폴더를 읽을 때, 보통file-scheme이지만ftp나ssh와 같은 scheme가 될 수 도 있다.onView: 사이드바에 지정된 특정 뷰가 열릴 때onWebviewPanel: 웹뷰 패널이 열릴 때onCustomEditor: WYSIWYG 에디터, 3D 모델 뷰어 등과 같은 커스텀 에디터를 만들어 질 때
Contribution Point
수많은 VS Code 구성요소와 기능 중 어떤 것들을 확장할 것 인가를 package.json에 JSON 형태로 정의한다. Extension을 개발 할 때 필요한 UI와 기능 확장을 적절히 수준으로 메타 프로그래밍이 가능하도록 설계되어 있다. 가장 많이 쓰였던 view, viewsContainers, menus, command, keybindings, configuration에 대해 정리해본다. (기여 포인트 전체 목록)
view
VS Code를 사용해봤다면 익숙히 봤었던 좌측에 사이드 바에 있는 explorer(폴더 탐색기), scm(소스 관리), debug(실행 및 디버깅), test(테스트 실행) 뷰가 해당된다. 예를 들어, 다음과 같이 explorer 뷰 내에 node 의존성 라이브러리 목록을 볼 수 있는 트리 뷰를 추가하려면
views의 expolorer에 식별자, 이름, 발생 시점, 이런식으로 설정하면 된다.
"views": {
"explorer": [{
"id": "nodeDependencies",
"name": "Node Dependencies",
"when": "workspaceHasPackageJSON",
"icon": "media/dep.svg",
"contextualTitle": "Package Explorer"
}]
}꼭 이 4가지 뷰 뿐만아니라 커스텀 뷰도 만들 수 있다. 이때 필요한 설정이 아래 viewsContainers이다.
viewsContainers
커스텀 뷰를 만들기 전 이 뷰를 감싼 뷰 컨테이너를 먼저 정의해주어야 한다.
"viewsContainers": {
"activitybar": [{
"id": "package-explorer",
"title": "Package Explorer",
"icon": "resources/explorer.png"
}]
}menus
editor나 palette(⇧⌘P), treeView item, context menu(우클릭 메뉴) 등 다양한 형태의 메뉴와 이 메뉴를 클릭했을 때 수행할 command를 정의한다.
"menus": {
"editor/title": [{
"when": "resourceLangId == markdown",
"command": "markdown.showPreview",
"alt": "markdown.showPreviewToSide",
"group": "navigation"
}]
}commands
명령에 대한 제목과 아이콘 등과 같은 UI 요소를 정의한다.
"commands": [{
"command": "extension.sayHello",
"title": "Hello World",
"category": "Hello",
"icon": {
"light": "path/to/light/icon.svg",
"dark": "path/to/dark/icon.svg"
}
}]keybindings
어떤 명령을 어떤 단축키를 누를 때 호출할지를 정의한다. 예를 들어 window에서는 ctrl + f1를, mac에서는 cmd + f1을 누르면 extension.sayHello라고 등록된 명령이 실행된다.
"keybindings": [{
"command": "extension.sayHello",
"key": "ctrl+f1",
"mac": "cmd+f1",
"when": "editorTextFocus"
}]configuration
사용자에게 노출 될 설정을 정의한다. 사용자는 설정 UI를 사용하거나 JSON 설정 파일을 직접 편집하여 작업 공간에 적용할 수 있다.
"configuration": [{
"title": "Clipboard",
"properties": {
"clipboard.maximumClips": {
"type": "integer",
"default": 200,
"description": "Maximum number of clips to save"
}
}
}]이 외에도 프로그래밍 언어 확장, 컬러 테마, 스니펫 등 다양한 contribution point들이 존재하고 이를 확장하여 개발할 수 있다.
VS Code API
Extension 개발 코드에서 호출 할 수있는 JavaScript API를 제공해준다. API 전체 목록은 여기에서 확인할 수 있는데 command, env, workspace 등 VS Code의 UI 구성요소와 환경 변수에 접근할 수 있는 네임스페이스와 인터페이스, 이벤트 핸들러 메소드 등 거의 필요한 모든 정보들이 정의되어 있다.
Workbench UI
VS Code UI 아키텍처나에 대한 설명이나 용어가 각각 따로따로 되어 있어 한눈에 볼 수 있도록 정리하였다.
