最近、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プランの元が取れているか気になる方も、こちらの拡張で手軽にチェックできます!ぜひ使ってみてください!
参考