VSCode Extension 만들기 - 1

정말 나태하게 지내다가 뭔가 해야겠단 마음을 간직한채 몇 달이 흘렀습니다.
그렇게 모든 걸 포기할 때 쯤에 VSCode를 사용하다가 아이디어가 떠올라서 만들어봤어요.

익스텐션 혹은 플러그인이런 걸 만들려면 이 곳을 확인해보시는 게 가장 확실합니다.

하지만 많은 영어를 읽고 싶지 않은 저 같은 분을 위해 작성해봅니다.

node가 안깔려 있는 완전 초보자용 글은 아니고 자바스크립트 혹은 타입스크립트 문법을 아시는데
익스텐션을 만들어본 적 없으신 분들을 위한 글입니다.

문서로 배웠다기 보단 실전형으로 부팆혀서 느낀 걸로 이해해서 작성한 글입니다.

 

 

1. 시작하기

리액트의 CRA처럼 익스텐션을 만드는 키트 같은 게 존재합니다.

터미널에 아래 명령어를 입력해주세요.

 

npm install -g yo generator-code

설치가 완료되면 

yo code

위 명령어를 입력합니다. 그러면 질의응답이 시작이 됩니다.

# ? What type of extension do you want to create? New Extension (TypeScript) 
# ? What's the name of your extension? url-opener 
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? url-opener
# ? What's the description of your extension? Open a URL
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? Yes
# ? Which package manager to use? yarn

저는 이런식으로 작성했습니다.

간단히 설명하면 타입스크립트로 URL Opener라는 익스텐션을 만들 생각입니다.
제가 알기로는 VSCode는 타입스크립트로 만들어진 프로그램입니다.

그래서 익스텐션도 타입스크립트나 자바스크립트로 만들 수 있습니다.

딱히 타입스크립트의 기능을 많이 사용하지는 않을 꺼라서 타입스크립트를 사용해본적 없어도 괜찮습니다.

 

code url-opener

VSCode를 사용해서 url-opener 폴더를 열어줍니다.

 

2. 환경 설명

폴더를 보면 안에는 이런식으로 작성이 되어 있는데 저희에게 중요한 파일은 

extension.ts와 package.json입니다.

이 두 파일외에는 README정도만 수정하게 될 것 입니다.

 

간단히 설명하면 package.json에 익스텐션 설정을 작성하고 실제 동작 로직은 extension.ts에 작성합니다.

 

일단 기본으로 구성되어있는 익스텐션을 실행해보죠.

 

왼쪽에 있는 Run and Debug 메뉴를 클릭해서 상단에 플레이 버튼을 누르면 익스텐션이 실행되는데
이때 알림창이 뜨면 Debug Anyway 버튼을 누릅니다.

그러면 새로운 VSCode가 뜰 것입니다.

 

새로 띄워진 VSCode에서 cmd(ctrl) + shift + p 을 누르면 명령 팔레트가 뜨고 여기서 hello를 입력하면 아래 Hello World라는 
익스텐션을 실행할 수 있습니다.

실행을 하면 오른쪽 아래 알림으로 Hello world~ 이런식으로 메시지가 뜰 것입니다.

기본으로 만들어진 익스텐션 기능이 이게 전부입니다.

 

부모 VSCode를 열어서 extension.ts 파일을 열어봅시다.

export function activate(context: vscode.ExtensionContext) {

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
	console.log('Congratulations, your extension "url-opener" is now active!');

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with registerCommand
	// The commandId parameter must match the command field in package.json
	let disposable = vscode.commands.registerCommand('url-opener.helloWorld', () => {
		// The code you place here will be executed every time your command is executed

		// Display a message box to the user
		vscode.window.showInformationMessage('Hello World from url-opener');
	});

	context.subscriptions.push(disposable);
}

activate 함수만 보면 되는데 쉽게 설명하면 이벤트리스너를 걸고 이벤트가 실행되었을 때 작동을 하는 것입니다.

내용은 url2.helloWorld 명령어 이벤트가 발생하면

vscode.window.showInformationMessage('Hello World from url-opener!');

부분이 실행되는 이벤트 리스너를 만들고

context.subscripttions에 넣어주는 것입니다.

 

package.json을 열어보시면

...
	"activationEvents": [
        	"onCommand:url-opener.helloWorld"
	],
    ...
    	"contributes": {
		"commands": [
			{
				"command": "url-opener.helloWorld",
				"title": "Hello World"
			}
		]
	},
...

이 부분이 핵심인데 activationEvents가 이벤트 리스터의 시작 포인트 인 것 같아요

commands에서는 명령 팔레트의 설정을 할 수 있습니다. 
위에서 명령 팔레트에서 hello를 입력했을 때 아래 Hello World가 표시되었는데 그것은 타이틀에 정의된 문구가 표시되는 것이죠.그리고 명령어를 사용하면 command에 정의된 명령어 ID가 작동을 하고 activationEvents에서 받고
extension.ts에서 레지스터한 부분까지 연결되는 거라고 저는 느꼈습니다.커맨드에 타이틀이나 extension.ts에 vscode.window.showInformationMessage('Hello World from url2!');로 수정을 하고 저장해보세요.

자식 VSCode에서 명령팔레트에 reload를 검색해보면 위와 같이 리로드 윈도우가 뜨고 이걸 누르면 수정된 내용이 반영이 될 것입니다.

 

저희는 package.json에서는 익스텐션의 동작환경을 설정하고 extension.ts에서 로직을 구성해서reload window로 수정된 내역을 확인하는 순서를 계속 사용할 꺼에요.

 

 

생각보다 글을 쓰는 게 많이 힘드네요이번에는 이 정도로 작성을 하고 다음에는 본격적으로 만드는 작업을 해볼께요

 

스포일러를 해보면 제가 만든 익스텐션은 URL Opener 요것 입니다.