QuickPick, InputBox, StatusBarを使ってTypeScriptでVSCodeExtensionを作る #TypeScript

作ったもの

ソースコード：https://gitlab.com/transnano/vscode-icon-all

機能

ステータスバーに自分好みにアイコンとメッセージをカスタマイズし、表示できる。

モチベーション

ステータスバーに余白があるので使いたい
VSCodeで使えるアイコンってどんなものがあるのだろう
選択・入力コンポーネントを使ってみたい

これらの思いから今回の拡張機能を作るに至った。

アイコン

VSCodeで使えるアイコンを公式から探そうとしたが見つからず、実際にアイコンを使っている拡張機能を探してから、その拡張機能のソースコードを漁ってどんなコードで表示しているのかをリバースエンジニアリング的なことで探した。

そうしているとvs-code-icon-names.jsonという素晴らしいまとめを見つけることができた。

コンポーネント

アイコンのまとめが見つかったのでこれを利用し、全アイコンを選択コンポーネントで出すことができた。

extension.ts

function getItems(): vscode.QuickPickItem[] {
    const array: Array<vscode.QuickPickItem> = [];
    array.push({ label: '$(alert)', description: "alert" });
    array.push({ label: '$(arrow-down)', description: "arrow-down" });
...
    array.push({ label: '$(x)', description: "x" });
    array.push({ label: '$(zap)', description: "zap" });

    return array;
}

選択コンポーネントの表示例

また、ステータスバーに表示するメッセージを受け付けるための入力コンポーネントも作った。

まとめ

なんとなくうまいことQuickPick, InputBox, StatusBarを使ってしかも前回失敗したTypeScriptでの拡張機能開発を実現できた。

自分好みのステータスバーを構築できるが、まだ設定を保存する機能をつけていないので土日にでもやってみようと思う。