VSCodeのステータスバー拡張機能でクリックイベントを追加する手順

Visual Studio Codeでステータスバーに追加する拡張機能をクリックした際に処理ができるイベントの追加手順を備忘録的に投稿します。

ステータスバー拡張機能

VSCodeでは、 APIを利用して開発した拡張機能を作成して独自の機能が追加できます。

ステータスバーを利用した拡張機能についての詳細は別記事をご覧ください。

https://blog.janjan.net/2025/12/13/vsc-editor-character-count-extension-build-steps

ステータスバーをクリックするイベント追加

拡張機能を利用して追加したステータスバーの領域をクリックして処理を行うイベントを追加していきます。

具体的には次の手順で行います。

1.［extension.ts］を編集します。（太字の部分）

import * as vscode from 'vscode';

let statusBarItem: vscode.StatusBarItem;

export function activate({ subscriptions }: vscode.ExtensionContext) {

  const commandId = 'charcount.showSelectionCount';
  subscriptions.push(vscode.commands.registerCommand(commandId, () => {
    const n = getNumberOfChar(vscode.window.activeTextEditor);
    vscode.window.showInformationMessage('Hello World!');
  }));

  statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);

  statusBarItem.command = commandId;
  subscriptions.push(statusBarItem);

  statusBarItem.color = '#00ff00';
  statusBarItem.show();
}

export function deactivate() {}

2. 実行して表示されたVSCodeのステータスバーをクリックすると［Hello World!］メッセージが表示されます

まとめ

今回は短い記事ですが、Visual Studio Codeでステータスバーに追加する拡張機能をクリックした際に処理ができるイベントの追加手順を紹介しました。

VSCodeでステータスバーのクリックイベントを追加したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。