OKdevTV

VSCode plug in

First Extension

• https://code.visualstudio.com/api/get-started/your-first-extension

Requirement

• Node.js
• Git

install generator

• Yeoman, VS Code Extension Generator

npm install -g yo generator-code

Generate scaffolds

• TypeScript or JavaScript

yo code
# ? What's the identifier of your extension? helloworld

code ./helloworld

Run

• F5
• Command Palette ⇧⌘P

Anatomy

1. onCommand Activation Event: onCommand:extension.helloWorld
2. contributes.commands Contribution Point: Hello World in Command Palette
3. commands.registerCommand VS Code API: extension.helloWorld bind command and function

File Structure

.
├── .vscode
│   ├── launch.json     // Config for launching and debugging the extension
│   └── tasks.json      // Config for build task that compiles TypeScript
├── .gitignore          // Ignore build output and node_modules
├── README.md           // Readable description of your extension's functionality
├── src
│   └── extension.ts    // Extension source code
├── package.json        // Extension manifest
├── tsconfig.json       // TypeScript configuration

Extension Manifest package.json

• <publisher>.<name> as a unique ID for the extension.
• main: The extension entry point.
• activationEvents and contributes
• engines.vscode minimum version of 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.51.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.51.0",
    "tslint": "^5.16.0",
    "typescript": "^3.4.5"
  }
}

Extension Entry File

• activate() and deactivate()

// 'vscode' 모듈은 VS Code extensibility 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!');

  // package.json 파일에 정의된 명령
  // registerCommand로 명령의 구현체 제공
  // commandId 파라미터는 package.json에 있는 command 필드와 매치되어야 함
  let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
    // 여러분이 정의한 명령이 실행될 때마다 실행되는 코드

    // 사용자에게 메시지 박스 표시
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}

// 이 메소드는 여러분의 확장 모듈이 비활성화될 때 실행됨
export function deactivate() {}

ref

• https://code.visualstudio.com/api/get-started/wrapping-up

What Else?