Work Documentation

Appearance

4. 主要な機能とAPI ​

アクティベーションイベント（activationEvents） ​

アクティベーションイベントは、拡張機能がメモリに読み込まれる（有効化される）トリガーとなる条件を定義するものです。 VS Code は、起動速度の低下やメモリの無駄遣いを防ぐため、必要になるまで拡張機能を読み込みません。 この遅延読み込みのタイミングを制御するのが activationEvents です。

設定は package.json に記述します。

json
{
  "activationEvents": [
    "onCommand:my-first-extension.helloWorld"
  ]
}

代表的なアクティベーションイベントには以下のようなものがあります。

  • onCommand:...

    特定のコマンドが実行されたときに拡張機能を有効化します。

  • onLanguage:...

    特定のプログラミング言語のファイル（例: onLanguage:typescript）が開かれたときに有効化します。

  • onFileSystem:...

    特定のファイルシステム上のファイルが読み込まれたときに有効化します。

  • *

    VS Code が起動した直後に、無条件で有効化します。起動速度に影響するため、どうしても必要な場合以外は使用を避けるべきです。

コントリビューションポイント（contributes） ​

コントリビューションポイントは、拡張機能が VS Code に対して提供する「機能の宣言」です。 これにより、プログラムを実行することなく、VS Code の UI（メニュー、サイドバー、キーボードショートカットなど）に項目を追加できます。

設定は package.json の contributes フィールドに記述します。

json
{
  "contributes": {
    "commands": [
      {
        "command": "my-first-extension.helloWorld",
        "title": "Hello World"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "my-first-extension.helloWorld",
          "group": "navigation"
        }
      ]
    }
  }
}

上記の例では、以下の2つを登録しています。

  • commands

    コマンドパレットに表示されるコマンド ID とタイトルを定義します。

  • menus

    エディタ上で右クリックしたときに表示されるコンテキストメニュー（editor/context）に、登録したコマンドを追加します。

主要な UI コンポーネントの実装 ​

VS Code の API を使用することで、様々な UI コンポーネントを表示・操作できます。

  • ステータスバー (StatusBar)

    エディタ最下部のステータスバーに、テキストやアイコンを表示できます。 vscode.window.createStatusBarItem を使用して作成します。

  • ツリービュー (Tree View)

    サイドバーの領域に独自の階層メニューを表示できます。エクスプローラーのようにプロジェクト内のリソースを表示するのに適しています。 vscode.window.registerTreeDataProvider を使用して実装します。

  • ウェブビュー (Webview)

    HTML、CSS、JavaScript を使用して、VS Code 内に完全に自由なデザインの Web ページを表示する機能です。 vscode.window.createWebviewPanel を使用して、カスタムのエディタやダッシュボード画面を作成できます。