3. 最初の拡張機能開発

Hello World コマンドの作成と動作確認

ジェネレータで生成されたプロジェクトには、最初から「Hello World」を表示するサンプルコードが含まれています。 このサンプルコードを使って、拡張機能がどのように起動され、動作するのかを確認します。

まず、生成されたプロジェクトフォルダを VS Code で開きます。 次に、キーボードの F5 キーを押すか、左側のアクティビティバーにあるデバッグアイコンをクリックし、上部の実行ボタン（緑色の三角マーク）を押します。

デバッグが開始されると、自動的に新しい VS Code のウィンドウ（「[Extension Development Host]」という名前のウィンドウ）が起動します。 このウィンドウには、開発中の拡張機能があらかじめインストールされた状態になっています。

起動したウィンドウで、以下の操作を行ってください。

• コマンドパレットを開きます（Windows/Linux: Ctrl + Shift + P、macOS: Cmd + Shift + P）。

• 「Hello World」と入力し、候補に表示される Hello World コマンドを選択して実行します。

• ウィンドウの右下に「Hello World from My First Extension!」というメッセージボックスが表示されます。

メッセージが表示されたら、拡張機能の動作確認は完了です。デバッグを停止するには、元の VS Code ウィンドウの上部に表示されているデバッグツールバーの「停止」ボタン（赤い四角マーク）を押します。

基本的な API の使用方法

それでは、拡張機能がどのように動いているか、プログラムコードを見てみましょう。 src/extension.ts を開きます。

主要なコード部分は以下のようになっています。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "my-first-extension" is now active!');

    const disposable = vscode.commands.registerCommand('my-first-extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from My First Extension!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

主要な関数の役割は以下の通りです。

• import * as vscode from 'vscode'

  VS Code が提供する API を利用するためのライブラリをインポートしています。

• activate(context)

  拡張機能が有効化されたときに一度だけ呼び出される関数です。ここでコマンドの登録などを行います。 vscode.commands.registerCommand を使って、コマンド ID（my-first-extension.helloWorld）と、それが実行されたときに実行する処理（メッセージ表示など）を紐付けています。

• deactivate()

  拡張機能がクリーンアップまたは無効化されるときに呼び出される関数です。リソースの解放が必要な場合はここに記述します。

このように、API を呼び出してエディタの機能を操作するのが、VS Code 拡張機能開発の基本となります。