VSCode 확장 프로그램 만들기

V

요즘 작업용 프로그램으로 Visual Studio Code를 주로 사용하고 있습니다.
프로그램이 가볍고 다양한 확장 프로그램이 존재해 다른 IDE보다 편하게 개발할 수 있습니다.

C# 개발을 진행할 때 각 스크립트 파일 안에서 다른 기능을 하는 함수들을 #region을 이용해 묶어서 사용 중인데 #region 목록을 출력하거나 해당 위치로 바로 갈 수 있는 기능이 보이지 않아 확장 프로그램을 제작하기로 마음먹었습니다.

그럼 지금부터 VSCode 확장 프로그램을 만들고 배포하는 방법을 알아보도록 하겠습니다.
이 글을 따라 하기 위해서는 VSCode와 Node.js가 설치되어 있어야 합니다.

VS Code Extension Generator 패키지 설치

VSCode의 확장 프로그램을 만들기 위해서는 VS Code Extension Generator 패키지를 설치해 주어야 합니다.
터미널을 실행하고 npm을 이용해 패키지 설치를 진행합니다.

$ npm install -g yo generator-code

확장 프로그램 프로젝트 생성

패키지 설치가 완료되면 프로젝트를 생성할 위치로 이동하여 프로젝트 생성 명령어를 입력합니다.

$ yo code
? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== (Y/n) 
     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? Region-Viewer
? What's the identifier of your extension? santacodes-region-viewer
? What's the description of your extension? This extension allows you to print a list of regions in a document and select a region to navigate to the document's location.
? Initialize a git repository? Yes
? Which package manager to use? npm

yo code 명령어를 이용해 프로젝트를 생성하면 확장 프로그램을 구성하는 스크립트 타입과 이름 등을 입력하게 됩니다. 저는 TypeScript를 선택하고 패키지 매니저는 npm으로 설정하였습니다.

$ code santacodes-region-viewer/

프로젝트 생성이 완료되면 code 명령어로 해당 프로젝의 경로를 입력하면 VSCode가 실행됩니다.
프로젝트 실행 후 디버그 모드를 실행하여 샘플 프로젝트가 동작하는지 확인해 봅니다.

디버그 모드 실행 > Shift + Command + P를 입력하여 커맨드 입력창을 열고 HelloWorld를 입력하고 엔터를 누르면 우측 하단에 메시지가 출력됩니다.

확장 매니페스트

package.json 파일에 어떠한 항목을 입력하느냐에 따라 확장 프로그램의 기능 및 실행 조건 등이 달라지게 됩니다.
샘플 프로젝트의 파일을 보면 activationEvents, contributes 항목에 입력된 값에 따라 HelloWorld라는 커맨드 이벤트를 동작 시킬 수 있었습니다.

...
	"activationEvents": [
		"onCommand:santacodes-region-viewer.helloWorld"
	],
	"main": "./out/extension.js",
	"contributes": {
		"commands": [
			{
				"command": "santacodes-region-viewer.helloWorld",
				"title": "Hello World"
			}
		]
	},
...

컨트리 뷰트(contributes)의 커맨드(commands)로 등록되어 있는 Hello World가 커맨드 창에 입력되면 해당 title의 command로 지정된 활성화 이벤트(activationEvents)인 santacodes-region-viewer.helloWorld가 실행이 됩니다.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	let disposable = vscode.commands.registerCommand('santacodes-region-viewer.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from Region-Viewer!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}

컨트리 뷰트에 등록된 커맨드가 입력되어 연결된 활성화 이벤트가 동작하기 위해서는 해당 커맨드 이름을 확장 프로그램의 핸들러에 등록해 주어야 하는데 extension.ts 파일을 확인하면 registerCommand 함수를 이용해 커맨드 이름과 해당 커맨드가 입력될 때 실행할 기능이 연결되어 있는 것을 확인하실 수 있습니다.

지금까지 VSCode의 확장 프로그램을 만들기에 앞서 샘플 프로젝트를 생성하고 실행하는 방법을 알아보았습니다.
다음 글에서는 TreeView를 이용하는 방법에 대해 알아보도록 하겠습니다.

참고 문서

Add comment

By berabue

최근 글

글 목록

최근 댓글

그 밖의 기능