編集

拡張機能の構造

前のトピックでは、基本的な拡張機能を実行できました。内部ではどのように動作しているのでしょうか？

Hello World 拡張機能は3つのことを行います

onCommand アクティベーションイベント (onCommand:helloworld.helloWorld) を登録します。これにより、ユーザーが Hello World コマンドを実行したときに拡張機能がアクティブ化されます。
注: VS Code 1.74.0 以降、package.json の commands セクションで宣言されたコマンドは、明示的な activationEvents の onCommand エントリを必要とせず、呼び出されたときに自動的に拡張機能をアクティブ化します。
contributes.commands 貢献ポイント を使用して、Hello World コマンドをコマンドパレットで利用可能にし、コマンドID helloworld.helloWorld にバインドします。
commands.registerCommand VS Code API を使用して、登録されたコマンドID helloworld.helloWorld に関数をバインドします。

これら3つの概念を理解することは、VS Code で拡張機能を作成するために不可欠です

アクティベーションイベント: 拡張機能がアクティブになる際のイベントです。
貢献ポイント: VS Code を拡張するために、package.json の拡張機能マニフェストで行う静的な宣言です。
VS Code API: 拡張機能のコード内で呼び出すことができるJavaScript APIのセットです。

通常、拡張機能は貢献ポイントとVS Code APIの組み合わせを使用してVS Codeの機能を拡張します。拡張機能の機能の概要トピックは、拡張機能に適した貢献ポイントとVS Code APIを見つけるのに役立ちます。

Hello World サンプルのソースコードを詳しく見て、これらの概念がどのように適用されているかを確認しましょう。

拡張機能のファイル構造

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

構成ファイルの詳細については、以下を参照してください。

VS Code のデバッグを設定するために使用される launch.json
VS Code のタスクを定義するための tasks.json
tsconfig.json は TypeScript ハンドブックを参照してください

しかし、Hello World 拡張機能を理解するために不可欠な package.json と extension.ts に焦点を当てましょう。

拡張機能マニフェスト

各VS Code拡張機能には、拡張機能マニフェストとして package.json が必要です。package.json には、scripts や devDependencies といったNode.jsのフィールドと、publisher、activationEvents、contributes といったVS Code固有のフィールドが混在しています。拡張機能マニフェストのリファレンスで、すべてのVS Code固有のフィールドの説明を見つけることができます。ここにいくつかの最も重要なフィールドを挙げます。

name と publisher: VS Code は拡張機能の一意のIDとして <publisher>.<name> を使用します。たとえば、Hello World サンプルはID vscode-samples.helloworld-sample を持ちます。VS Code はこのIDを使用して拡張機能を一意に識別します。
main: 拡張機能のエントリポイントです。
activationEvents と contributes: アクティベーションイベントと貢献ポイントです。
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.51.0"
  },
  "categories": ["Other"],
  "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "helloworld.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"
  }
}

注: 拡張機能がVS Codeバージョン1.74より前のバージョンを対象とする場合、activationEvents に onCommand:helloworld.helloWorld を明示的にリストする必要があります。

拡張機能のエントリファイル

拡張機能のエントリファイルは、activate と deactivate の2つの関数をエクスポートします。activate は登録されたアクティベーションイベントが発生したときに実行されます。deactivate は、拡張機能が非アクティブ化される前にクリーンアップする機会を与えます。多くの拡張機能では、明示的なクリーンアップは必要ない場合があり、deactivate メソッドは削除できます。しかし、VS Codeがシャットダウンするとき、または拡張機能が無効化またはアンインストールされるときに操作を実行する必要がある場合、これがそのためのメソッドです。

VS Code 拡張機能APIは、@types/vscode 型定義に宣言されています。vscode 型定義のバージョンは、package.json の engines.vscode フィールドの値によって制御されます。vscode 型は、コード内でIntelliSense、Go to Definition、その他のTypeScript言語機能を提供します。

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// 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 "helloworld-sample" 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('helloworld.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!');
  });

  context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
export function deactivate() {}

06/12/2025