0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-06-02

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

ソースはこちらです。

拡張機能でできること

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

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

スクリーンショット 2025-06-02 22.04.30.png

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

スクリーンショット 2025-06-03 9.08.08.png

インストール方法(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ファイルを選択

image.png

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

image.png

3. Cursorへのインポート

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

image.png

さいごに

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

参考

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?