🔔
エディターでGitHubレビュー管理・通知を実現する拡張を作った
はじめに
日々の開発で「GitHubのPRレビュー依頼をチェックするためにブラウザを開くのが面倒」だったり、「そもそもレビューの通知をSlackを通じてわざわざ受けていたり、そもそも気付かない」だったり、「Slackでわざわざレビュー依頼通知を二重で受けている」という方多いのではないでしょうか？
そんな課題を解決するため、VS CodeやCursor上でGitHubのプルリクエスト レビュー依頼をエディター内で管理・通知を受け取ることができる拡張機能「GitHub Review Manager」 を開発しました。
開発背景
- エディターでの開発が中心であり、ブラウザを開くのが面倒
- レビュー依頼を見落としてしまうことが多い、そもそも気付かない
- レビュー依頼の優先度を可視化したい
- レビュー依頼のステータスを管理したい
🎯 この拡張機能でできること
✨ 主な機能
- 📊 VS Codeなどのエディター内でレビュー依頼を一覧表示
- 🔔 新しいレビュー依頼の即座の通知（音付き）
- 🎯 緊急度に応じた視覚的な優先度表示
- 👤 レビュアーのアバター表示で即座に識別
- ⚡ ワンクリックでレビュー依頼を受けた該当PRをブラウザで開く
- ⏰ 最終活動からの経過時間表示
📸 スクリーンショットイメージ
サイドバー
レビュー依頼一覧は、優先順位インジケータと依頼者のアイコンを備えたクリーンなサイドバービューで表示されます。項目をクリックすると、即座にそのPRがブラウザで開きます。
通知
新しいレビュー依頼が届くと、サウンドアラートで通知。ワンクリックでPRを表示したり、全レビュー依頼一覧を開くことができます。
ステータスバー
ステータスバーには、保留中のレビュー数がスマートな色分けで表示されます - 通常のリクエストは黄色、緊急のものは赤（3日以上経過したものがある場合）。
🚀 インストール方法
1. VS Code Marketplaceからインストール
# VS Code Extensions画面で検索
GitHub Review Manager
または こちらのリンク から直接インストール
2. GitHubトークンの設定
-
GitHub Personal Access Token を生成
- スコープ:
repoを選択
- スコープ:
- VS Codeの設定を開く（
Ctrl/Cmd + ,） - 「GitHub Review Manager」で検索
-
githubReviewManager.tokenにトークンを設定
3. 使用開始
設定完了後、アクティビティバーに GitHub Review Manager のアイコンが表示され、すぐに使用開始できます。
📱 使用画面
アクティビティバーでの表示
🎯 GitHub Review Manager
├── 🚨 Fix critical security issue [user/repo] [Draft]
├── 🔥 Add new authentication [user/repo] [⚡]
├── ⚠️ Update documentation [user/repo]
└── 🆕 Refactor user service [user/repo]
緊急度表示システム
- 🆕 New - 当日中（新しいリクエスト）
- ⚠️ 注意 - 1-2日経過
- 🔥 緊急 - 3-6日経過
- 🚨 最重要 - 1週間以上経過
ステータス表示
-
[Draft]- ドラフトのプルリクエスト -
[⚡]- マージコンフリクトが発生
🎨 リッチな情報表示
ホバーで詳細情報を表示：
## 🔥 PR #123: Fix authentication bug
📅 PR作成: 2024-01-10 14:30:00
⏰ 最終活動: 2日前 (2024-01-18 16:45:00)
📁 リポジトリ: username/awesome-project
👤 作成者: developer-name
✅ ステータス: レビュー準備完了
⚠️ マージ可能性: コンフリクトあり
📊 変更内容:
- ➕ 45行追加
- ➖ 12行削除
- 📄 5ファイル変更
- 💬 3件のレビューコメント
🔗 ブラウザでPRを開く
⚙️ カスタマイズ設定
| 設定項目 | 説明 | デフォルト |
|---|---|---|
githubReviewManager.token |
GitHub Personal Access Token (repoスコープ必須) |
"" |
githubReviewManager.refreshInterval |
自動更新間隔（秒） |
300 (5分) |
githubReviewManager.showNotifications |
新規レビュー依頼の通知表示 | true |
githubReviewManager.playSound |
新規レビュー依頼時の音声通知 | true |
💡 開発時のポイント
1. ユーザビリティの追求
- コンパクトデザイン: サイドバーの狭いスペースでも見やすい表示
- 直感的な優先度表示: 絵文字による視覚的な緊急度
- スマートソート: 最終更新時刻による適切な優先順位付け
2. パフォーマンス最適化
- 効率的なAPI使用: 必要最小限のリクエスト
- 適切なキャッシュ: 無駄なAPI呼び出しを防止
- バックグラウンド更新: UIをブロックしない非同期処理
3. VS Code統合
- ネイティブUI: VS Codeの標準UIコンポーネントを活用
- アクティビティバー統合: 専用サイドバーパネル
- コマンドパレット対応: VS Code標準の操作方法
🎉 メリット
開発効率の向上
- ブラウザ切り替え不要: エディター内で完結
- 即座の通知: 新しいレビュー依頼を見逃さない
- ワンクリックアクセス: PRへの素早いアクセス
チーム連携の改善
- レスポンス速度向上: 通知により迅速な対応
- 優先度の可視化: 緊急度に応じた適切な対応順序
- 情報の集約: 必要な情報がエディター内一箇所に集約
まとめ
GitHub Review Manager は、日々のコードレビュー作業を エディター 内で完結できる便利な拡張機能です。
特に以下のような方におすすめです:
- 複数のリポジトリでレビュアーを務めている
- レビュー依頼の見落としを防ぎたい
- エディターから離れずに効率的に作業したい
- チームでのレビュー文化を向上させたい
ぜひお試しください！フィードバックやContributionもお待ちしています。
この記事が参考になったら、ぜひGitHubおよび拡張機能にスターをお願いします！⭐
Discussion