この記事はCodeRabbit オンラインワークショップ「レビュー on VS Code」用の資料です。
前半（CodeRabbit機能拡張のセットアップ）
VS Code向けのCodeRabbit機能拡張は、CodeRabbitが公式提供する機能拡張です。単体でも動作しますが、AIコーディングエージェントとの連携も想定しています。
インストール
インストールはこちらより行ってください。
または、VS Codeなどの機能拡張画面で CodeRabbit と検索してください。
インストールが完了すると、左側にCodeRabbitパネルが追加されます。
認証
インストールしたら、認証を実行します。 Use CodeRabbit for Free をクリックします。
ブラウザが立ち上がるので、CodeRabbitのアカウントでログイン&認証を行います。
VS Codeに戻ってきて、認証完了です。
設定について
幾つかの設定が用意されています。必要に応じて変更してください。
-
Agent Type
Fix with AIを押した際に利用するAIコーディングエージェントを指定します -
Auto Review Mode
コミットすると自動でコードレビューを開始する設定です -
Auto Start Task
AIコーディングエージェントに渡したプロンプトを自動実行する設定です - ** Self Hosted Url**
CodeRabbitをセルフホストで利用している場合のURLです（エンタープライズ向け）
後半
対象リポジトリ
修正後
散りばめたミス。
- XSS脆弱性: highlightSearchText がエスケープせず "" + keyword + "" を文字列連結 → ui-renderer.js 側で innerHTML に突っ込まれる。
<script>... を含むカードで発火 - escapeHtml が不完全: & 未処理、" ' 未処理、String.replace で最初の1件のみ
- replace が1件だけ: ハイライトが最初の出現のみ。正規表現未使用
- 大文字小文字を区別: shouldShowCard で toLowerCase() せず indexOf 比較 → 「Task」で「task」にヒットしない。
- ==／!=: 厳密比較を使わず
- var 汚染: モジュールスコープの隔離なく、グローバルを汚す
- デバウンスなし: setupSearchListener が毎キー入力で即再描画 → 大量カードで重い
- onclick 直代入: 既存ハンドラを上書き破壊する書き方
- className.replace("active", ""): "active-xyz" のような別クラス名と部分一致して誤削除。classList を使うべき
- 入力バリデーション欠如: setActiveFilter が不正IDでもそのまま代入
- null安全性なし: document.getElementById(...) の戻り値を未チェックで使用
- trim() 忘れ: 前後空白で検索が通らない
修正後のファイル
レビュー
該当リポジトリをクローンします。ダウンロードだと .git フォルダがないので、クローンしてください。
git clone https://github.com/goofmint/RabbitKanban.git
そして、修正後のファイルをダウンロードし、伸張してください。その内容（HTML、JavaScript、CSSファイル）をクローンしたリポジトリの内容と差し替えてください。
ファイルを差し替えると、アンコミットなファイルが並びます。 Review all changes を押すとレビューが開始します。
ファイル単位でレビュー結果が表示されます。
レビュー内容を表示すると、レビューコメントや Fix with AI が確認できます。
ProプランやAPI課金を行っている場合は、レビューの回数制限が柔軟になるので、3回程度実施すると良いです。