Visual Studio Code での Extension開発02(拡張の解剖学)

Visual Studio Code での Extension開発02
(拡張の解剖学)

概要

公式ドキュメント「拡張の解剖学」を読み進めます
※公式ドキュメントのタイトルは「Extension Anatomy」(google翻訳がよい感じです)

公式ドキュメントと前回分は以下の通りです

公式ドキュメントあなたの最初の拡張 Visual Studioコード拡張API
前回分00: Visual Studio Code での Extension 開発00(環境構築)
前回分01: Visual Studio Code での Extension開発01 (わたくしの最初の拡張)

では、はじまめす

拡張の解剖学

まずは用語の説明です

用語	内容
◆Activation Event	拡張機能がアクティブになるイベント
◆Contribution Points	package.json拡張マニフェストで行う静的宣言
VS Code API	拡張コードで呼び出すことができるJavaScript APIのセット

◆の詳細は後述します

ディレクトリ構造と特に重要な2ファイル

❖extension.tsと❖package.jsonが特に重要なファイル

.
├── .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

❖ package.json について

Extensionのマニフェストファイル
Extensionのディレクトリ構造のルートに必ず必要
各フィールドについて Extension Manifest

名	必須	タイプ	詳細
name	Y	string	Extensionの名前スペースを入れずにすべて小文字にする
publisher	Y	string	発行者名
main	-	string	Extensionのエントリポイント
◆activationEvents	-	array	この拡張機能のアクティブ化イベントの配列
◆contributes	-	object	contributesポイント
engines.vscode	Y	object	Extensionが依存するVS Code APIの最小バージョンを指定

{
  "name": "helloworld",
  "displayName": "HelloWorld",
  "description": "LEAVE BLANK",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.33.0"
  },
  "categories": [
    "Other"
  ],
 ◆"activationEvents": [
    "onCommand:extension.helloWorld"
  ],
  "main": "./out/extension.js",
 ◆"contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "myApp"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
  },
  "devDependencies": {
    "typescript": "^3.3.1",
    "vscode": "^1.1.28",
    "tslint": "^5.12.1",
    "@types/node": "^10.12.21",
    "@types/mocha": "^2.2.42"
  }
}

上記から一部抜粋
activationEvents
　.onCommand:extension.helloWorld　※activationEventsの定義
contributes
　.commands.command　※コマンドを定義
contributes
　.commands.title　※コマンドのタイトルを定義

❖ extension.ts について

extensionのソースファイル
アクティブ化と非アクティブ化という2つの機能をエクスポートしている

activate:登録されたアクティベーションイベントが発生すると実行される
deactivate:機能拡張が無効化される前にクリーンアップの機会を与える

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {//activate
        console.log('Congratulations, your extension "helloworld" is now active!');
    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
        vscode.window.showWarningMessage("WarningMessag");
    });
    context.subscriptions.push(disposable);
}

export function deactivate() {//deactivate
}

まとめ

extension.tsとpackage.jsonが特に重要なファイル
- extension.tsはソースファイル
- package.jsonはマニフェストファイル
- activationEventsでコマンドを実行するきっかけを定義している
- contributesでコマンドの名前などを決めている

参考

公式ドキュメントエクステンション Visual Studioコード拡張API
公式ドキュメント拡張マニフェスト| Visual Studioコード拡張API