VSCode Extension - Your First Extension 따라해보기

만들어보고싶은 VSCode extension이 있어서 

사실 내가 필요한데 나한테 딱 맞는 extension이 없어서

대망의 삽질을 시작해보려고 한다.

 

마음같아서는 빨리 밤 며칠 새고 뚝딱 만들었으면 좋겠다. 질질 끌면 피곤하잖아...꼬부가 알겠니?

 

이 글은 성공적으로 VSCode extension을 만들어보고 쓰는 글이 아니다.

그냥 삽질을 위한 첫 삽을 뜬 내가 앞으로 몇번의 삽질을 할지 기대되어 기록하는 것이니, 참고하시도록.

---

MS VSCode Document - Your First Extension

yo code

 

오... yo code 라니.. 매우 힙한걸? 이 명령어 생각할 때 마다 힙찔이가 마이크로 내 귀에 yo code 속삭이는 느낌.

 

아무튼, 얘는 이제 vscode extension을 만들기 위한 여러 패키지(?)들을 자동으로 설치해 주는 

실제로도 힙한 일을 하는

명령어이다.

Install

yo code를 실행하기 위해서는 먼저 node.js와 git이 설치되어 있어야 한다.

해당 환경이 준비되었다면, 다음의 명령어를 통해 yo code를 실행할 수 있도록 친구들을 설치해 준다.

npm install -g yo generator-code

Run

이제 yo code를 실행해 볼 차례.

 

앞서 말했듯이 이 명령어를 통해 내가 만들고 싶은 extension의 기반을 호로록 가져올 수 있다.

yo code

실행하면 다음과 같이 힙한 친구가 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

나온다.

일단 처음 해보는거니까 기본 예제를 한번 실행해 보자.

나는 앞으로도 TypeScript를 이용하여 개발할 것이기 때문에, TypeScript로 새로운 extension을 만드는 것을 선택하였다.

쭉쭉쭉 하고싶은대로 설정을 하고 지나가자. 첫 샘플 프로젝트는 hello world가 국룰이지.

 

설정을 하고 지나가면 얘가 알아서 필요한 파일들과 dependency들을 깔아준다.

 

 

모든 준비가 완료되면 마지막 줄에 '너 저 폴더로 가서 vscode 새로 열어서 시작해!' 라고 말해준다. 하라면 해야지 뭐

 

위의 명령어들을 실행하면 새 vscode 창에서 hello-world 디렉토리가 열리고, 설치된 친구들을 확인할 수 있다.

 

나는 sample project여서 git repo 연결 안한다고 했는데, git repo 연결하겠다고 애초에 그러면 쓸데없는 애들 git에 안올라가게 .gitignore도 잘 만들어져서 여기에 추가된다.

Project

구조 살펴보기

vscode로 여러 설정들을 해 본 사람들은 알겠지만, 대충 모르는 프로젝트 일단 받았을 때 root에 있는 .vscode\ 디렉토리에 들어가 보고, 언어에 맞는 중요 설정 파일을 훑어보면 대~충 상황파악은 할 수 있다.

 

.vscode\에 있는 launch.json 이나, tasks.json 파일들에 어떤 작업이 이루어질 것인지 쓰여있기 때문에 약간 하향식? 으로 어떤 일들이 펼쳐질지 지레짐작 할 수 있다.

 

또한, node.js 특성상 package.json 파일에 정보들이 와장창 있기 때문에 이 파일 확인은 필수라고 생각한다.

package.json

    "activationEvents": [
        "onCommand:hello-world.helloWorld"
    ],
    "main": "./dist/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "hello-world.helloWorld",
                "title": "Hello World"
            }
        ]
    },

package.json 파일을 처음 훑어보면 일단 이름 이런건 건너 뛰고 저기부터 이게 뭐시여 한다. 차근차근 살펴보자.

activationEvents

이름만 봐도 뾰로롱 반응하는 event들이 쓰여 있을 만한 곳이다.

 

지레짐작으로 hello-world.helloworld 명령어가 실행되면~~ 이벤트가 발생한다는 것 같다.

main

main으로! 돌아가는! js 파일!

 

node에는 항상 이런 main 파일이 있다. 가령 보통 얼렁뚱땅 플젝하면 index.js로 만드는 그런 것들..

 

아무튼 main이 되는 js파일을 살펴보면 도움이 된다.

contributes

뭔지 모르겠다 싶을 때는 애초에 vscode에서 기본 제공하는 .json 틀이니 key에 마우스를 올려 두면 설명을 컨닝할 수 있다.

 

음 그렇군. 아마 F1을 누르면 사용할 수 있는 command palette에 title을 치면 해당하는 command가 실행되는 구조인 것 같다.

 

여러 command 들을 확장하여 사용할 수 있는 구조로 보인다.

main.js

이제 package.json에 쓰여있던 main.js를 탐색하러 가 볼 차례이다.

 

package.json에서는 .\dist\extension.json에 있다고 했지만, dist폴더는 node를 실행했을 때 package.json을 기반으로 생성되는 실행 디렉토리..? 라고 어렴풋이 알고 있기 때문에 .\dist\에서 찾는게 아니라 .\src\에서 찾으면 된다. 그리고 .js로 변환되기 전의 오리지널 소스이니 .ts를 찾으면 된다.

 

가보면 두둥탁

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
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 "hello-world" 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('hello-world.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 Hello world!');
    });

    context.subscriptions.push(disposable);
}

죠씁니다.

 

대충 구조를 보면, activate 함수는 우리의 extension이 실행되자마자 호출되는 함수이다.

내부에 있는 console.log로 인해 해당 라인들이 콘솔에 출력될 것으로 보인다.

registerCommand

여기다 여기! 주석으로 설명되어있듯이, 앞에 package.json에 선언되어 있던 command들의 행동을 기술하는 곳이다.

앞에서 hello-world.helloWorld command 가 있었는데, 이 command를 registerCommand 함수를 이용하여 어떤 일을 할 것인지 명시하여 명령어를 등록하는 것이다.

 

대~충 보면 hello-world.helloWorld 명령어가 실행되면, 아래의 text가 message box로 출력될 것 같다.

 

그럼 이제 진짜 한번 실행을 해 보자!

Run extension

.\vscode\launch.json에 쓰여 있는 내용에 따라, Run extension을 실행하면 extension을 테스트 해 볼 수 있는 새로운 vscode 창이 뜨면서 우리의 helloworld command를 실행해 볼 수 있을 것이다.

 

debug 쪽에서 시작해도 되고, 그냥 F5를 눌러도 된다.

 

하지만 나는 여기서 삽질을 했지.

엄연히 말하면 내 실수는 1도 없고 MS 실수이니... 내 삽질은 아니다.

그 과정을 보고 싶으면 여기로..

 

만약 여기서 어? 나 F5 눌러도 뭐가 안나오고 그냥 왼쪽 밑에서 빌딩만 주구장창 돌아가는데 뭐지 싶으면 윗줄의 링크를 눌러 들어가보라. 하하하하하하.

 

아무튼, F5를 눌러보면 다음과 같이 extension developent host가 따랑 하고 켜짐을 볼 수 있다.

 

host window에서 F1을 눌러서 Hello world 명령을 검색하여 실행해 보면 위의 사진에 오른쪽 아래에 있는 message box에 extension.ts에서 봤던 text가 출력됨을 볼 수 있다!

 

신기방기