Claude Codeのコスト爆増を防ぐVSCode/Cursor拡張をつくった

最近、Claude Codeの使用料金を可視化する神CLIツールが話題ですが、そもそもコマンドを打たずにIDE上で料金確認できたら楽じゃね!?と思い、VSCode(とCursor)の拡張機能をつくりました(もちろんClaude Codeで)。

ソースはこちらです。

拡張機能でできること

• 当日のClaude Code利用料金を下部バーに表示(30秒間隔で更新)
• クリックで「過去7日間の料金＆トークン利用量の表」を表示
• VSCodeでもCursorでも使える

こんな感じで表示されます。

クリックで詳細が出ます。

インストール方法(3分でできます)

1. クローン&ビルド

git clone https://github.com/suzuki0430/ccusage-vscode-extension.git
cd ccusage-vscode-extension

# 依存関係インストール
npm install

# TypeScriptコンパイル
npm run compile

# 拡張機能パッケージ化
npm run package

カレントディレクトリにccusage-vscode-0.1.0.vsixファイルができます。

2. VSCodeへのインポート

• EXTENSIONSタブの「…」 → Install from VSIX → 作成したVSIXファイルを選択

• インポート後は下部バーに料金表示(表示されなかったらVSCodeを再起動)

3. Cursorへのインポート

• EXTENSIONSサイドバーにVSIXファイルをドラッグ＆ドロップでOK

さいごに

API利用で使いすぎが心配な方も、MAXプランの元が取れているか気になる方も、こちらの拡張で手軽にチェックできます！ぜひ使ってみてください！

参考