📔

VSCode 拡張機能：ステータスバーに追加する

2022/08/21に公開

VS Code

拡張機能

tech

ステータスバー

ステータスバーとはVS Codeの下部にある状態などを表示するバーのことである。

(VS Codeの下部にこんな感じのバーが表示されているはず)

このステータスバーに自分のコマンドなどを表示させたい場合の方法です。

Sample

まずはステータスバーに表示するだけのサンプルです。

import * as vscode from 'vscode';

// 1)VS Codeのサンプルにあわせてグローバル変数にしています。
let myStatusBarItem: vscode.StatusBarItem;

export function activate(context: vscode.ExtensionContext){
    // 2)StartusBarItemを作成する。
    //第一引数：左右どちらのグループにアイテムを追加したいか？
    //　　　　　どちらに追加するべきかはルールが決まっているので後述
    //第二引数：優先度。数字が大きいほどグループ内で左側の位置に表示されます。
    myStatusBarItem = 
        vscode.window.createStatusBarItem(
	    vscode.StatusBarAlignment.Right, 100);
    // 3)表示テキスト。VS Code標準のアイコンも使用可能。
    myStatusBarItem.text = 'Sample';
    // 4)ステータスバーに表示する。
    myStatusBarItem.show();
    //myStatusBarItem.hide();//隠す場合はhide()
};

ステータスバーはPrimary group(left)とSecondary group(right)にグループが分かれており、StatusBarItemを作成する際に優先順位とともに指定します。

Primary group、つまりは左側はワークスペース全体に関連する項目 (ステータス、問題/警告、同期) に関する項目を表示するべきであり、その他二次的または文脈上の項目 (言語、間隔、フィードバック) は Secondary group 、右側に表示するようにしてください。

vscode.StatusBarAlignment.Left - Primary group
vscode.StatusBarAlignment.Right - Secondary group

優先順位は数字が大きいほどそのグループ内のStatusBarItemの順番で左側に表示されます。
負の値も指定可能です。

ステータスバーには文字だけでなくアイコンも表示されている場合もある。
アイコンを使用したい場合は$(アイコンの名前)で指定する。

myStatusBarItem.text = '$(star) Sample';

☆マークが表示されている

アイコンの名前は公式のアイコンリストのページを参照のこと。

コマンドを登録する

commandにコマンドIDを指定すればアイテムをクリックしたときにそのコマンドが実行されます。

myStatusBarItem.command = `コマンドID`;

コマンドは自分のコマンドでもいいしデフォルトで用意されているものでもＯＫです。

文字色

CSSと同じ形で色の指定が可能です。

myStatusBarItem.color = '#F00';

背景色

背景色は2022年８月現在二色しか用意されていません。
公式では今後追加される予定と記載があります。

またエラーの場合、警告の場合のみ背景色を設定してください。

//エラーの場合
myStatusBarItem.backgroundColor =
    new vscode.ThemeColor('statusBarItem.errorBackground');
//警告の場合
myStatusBarItem.backgroundColor =
    new vscode.ThemeColor('statusBarItem.warningBackground');

error

warning

id

vscode.window.createStatusBarItemで最初の引数にIDを指定することも可能です。
サンプルのようにIDを指定しない場合IDは拡張機能のIDと同じになります。

例：undefined_publisher.statusbar-sample

名前

アイテムの名前。右クリックしたときに表示されるので分かりやすい名前にしてください。

myStatusBarItem.name = 'User defind';

わかりづらい名前にしてる・・・

ツールチップ

アイテムの上にカーソルをもってきたときに表示される文字列。
Markdown形式の装飾も可能です。

myStatusBarItem.tooltip = 'ツールチップです。';