익스텐션 구조

지난 주제에서, 당신은 기초적인 익스텐션을 만들 수 있었습니다. 내부는 어떻게 작동할까요?

Hello World 익스텐션은 3가지 기능이 있습니다:

Activation Event 인 onCommand : onCommand:extension.helloWorld 을 등록하고, 유저가 Hello World 명령을 실행시켰을 때. 익스텐션이 활성화됩니다.
Contribution Point 인 contributes.commands 를 사용해서 명령어 Hello World 를 명령팔레트에서 이용할 수 있게 합니다. 그리고 명령어 ID extension.helloWorld 에 연결합니다.
VS Code API 인 commands.registerCommand 를 사용하여 등록된 명령어 ID extension.helloWorld 에 하나의 함수를 연결합니다.

이 세 가지 개념을 이해하는 것이 VS Code에서 익스텐션을 작성하는 데 중요합니다:

Activation Events: 여러분의 익스텐션이 활성화된 이벤트.
Contribution Points: 여러분들이 VS Code를 확장시키기 위해 package.json Extension Manifest 에 만든 정적인 선언.
VS Code API: 여러분들의 익스텐션 코드에서 불러올 수 있는 자바스크립트 APIs 모음.

일반적으로, 여러분들의 익스텐션은 VS Code의 기능을 확장하기 위해 Contribution Points과 VS Code API의 조합을 사용합니다. Extension Capabilities Overview 에 관한 내용은 여러분들의 익스텐션에 적합한 Contribution Point 와 VS Code API 를 찾는 데 도움을 줄 것입니다. Hello World 예제 소스 코드를 자세히 보고 위 개념들이 어떻게 적용되었는 지 확인합시다.

익스텐션 파일 구조

.
├── .vscode
│   ├── launch.json     // 익스텐션을 실행하고 디버깅하기 위한 설정
│   └── tasks.json      // 타입스크립트를 컴파일하는 빌드 작업을 위한 설정
├── .gitignore          // 빌드결과와 node_module을 무시한다
├── README.md           // 여러분의 익스텐션 기능에 대한 읽을 수 있는 설명
├── src
│   └── extension.ts    // 익스텐션 소스코드
├── package.json        // 익스텐션 manifest
├── tsconfig.json       // 타입스크립트 환경 설정

여러분은 환경 설정 파일에 대한 더 많은 내용을 읽어 볼 수 있습니다:

launch.json 은 VS Code Debugging (디버깅)을 위해 사용합니다.
tasks.json 는 VS Code Tasks 를 정의하는 데 사용합니다.
tsconfig.json 는 타입스크립트 Handbook 을 사용합니다

그러나, package.json 과 extensions.ts 에 집중하도록 합시다. 왜냐하면, 이 두 가지가 Hello World 익스텐션을 이해하는 데 필수적이기 때문입니다.

Extension Manifest(익스텐션 매니페스트)

각각의 VS Code 익스텐션은 하나의 package.json 을 Extension Manifest 로서 가지고 있어야 합니다. package.json 은 Node.js 의 scripts 와 dependencies 부분과 VS Code의 특정 필드인 publisher, activationEvents, contributes 부분들을 모두 가지고 있습니다. 여러분들은 Extension Manifest Reference 에서 모든 VS Code의 특정 필드에 대한 모든 설명을 찾을 수 있습니다. 여기에는 가장 중요한 몇 개의 필드들이 있습니다:

name 와 publisher: VS Code는 <publisher>.<name> 을 익스텐션을 위한 유일한 ID로 사용합니다. 예를 들어, Hello World 예제는 ID vscode-samples.helloworld-sample 를 가지고 있습니다. VS Code 여러분의 익스텐션이라는 것을 확실하게 증명하기 위해 ID를 사용합니다.
main: 익스텐션의 시작점.
activationEvents 와 contributes: Activation Events 와 Contribution Points.
engines.vscode: 이것은 익스텐션이 의존하는 VS Code API의 최소 버전을 명시합니다.

{
  "name": "helloworld-sample",
  "displayName": "helloworld-sample",
  "description": "HelloWorld example for VS Code",
  "version": "0.0.1",
  "publisher": "vscode-samples",
  "repository": "https://github.com/Microsoft/vscode-extension-samples/helloworld-sample",
  "engines": {
    "vscode": "^1.34.0"
  },
  "categories": ["Other"],
  "activationEvents": ["onCommand:extension.helloWorld"],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
  },
  "devDependencies": {
    "@types/node": "^8.10.25",
    "@types/vscode": "^1.34.0",
    "tslint": "^5.16.0",
    "typescript": "^3.4.5"
  }
}

익스텐션 시작 파일

익스텐션 파일은 두 개의 함수 activate 와 deactivate 로 내보내집니다. activate은 여러분이 등록한 Activation Event 이 발생했을 때 실행됩니다. deactivate는 여러분의 익스텐션이 비활성화 되기 전에, 정리할 기회를 제공합니다.

vscode 모듈은 node ./node_modules/vscode/bin/install 에 위치한 하나의 스크립트를 가지고 있습니다. 이 스크립트는 package.json 파일 안에 engines.vscode 필드에 정의된 VS Code API 정의 파일을 가져옵니다. 이 스크립트를 실행한 후에, 여러분들은 인텔리센스, 코드에서 정의로 이동하는 기능, 다른 타입스크립트 언어 특징을 얻게 됩니다.

// 'vscode' 모듈은 VS Code 확장 API를 포함합니다.
// 아래의 코드에서 모듈을 가져오고, vscode라는 이름으로 참조합니다.
import * as vscode from 'vscode';

// 이 함수 익스텐션이 활성화 되었을 때 호출됩니다.
// 여러분의 익스텐션은 명령이 실행된 바로 첫 순간에 활성화 됩니다.
export function activate(context: vscode.ExtensionContext) {
  // 로그 (console.log) 와 에러 (console.error)를 출력하기 위해 콘솔을 사용합니다.
  // 이 줄의 코드는 익스텐션이 활성화 되었을 때, 오직 한 번만 실행될 것입니다.
  console.log('Congratulations, your extension "helloworld-sample" is now active!');

  // 명령어는 the package.json 파일에 정의되었습니다.
  // 이제 registerCommand 명령어의 구현이 있습니다.
  // commandId 파라미터는 package.json 에 있는 명렁어 필드와 매칭되어야 합니다.
  let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
    // 여러분이 여기에 쓴 코드는 명령이 실행될 때마다 실행될 것입니다.

    // 유저에게 메시지 박스를 보여줍니다.
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}

// 이 함수는 여러분의 익스텐션이 비활성화되었을 때 호출됩니다.
export function deactivate() {}