GitHub Copilotで複数ファイルを参照する方法

GitHub CopilotがHTMLファイルからCSS/JSを参照せず、期待するコードを生成しない場合があります。特に複数ファイルを跨ぐプロジェクトでは、適切なコンテキスト提供が必要です。以下で対策を解説します。

---

問題の本質：コンテキスト不足

GitHub Copilotはデフォルトで現在のファイルのみを参照します。

• HTML内で「グリッチアニメーションのテキスト」や「動画ループ機能」を指示しても、関連CSS/JSを認識できません
• 外部ファイルの構造や関数を参照できないと、正確なコードが生成されません

---

解決策：@workspace コマンドの利用

VS CodeのCopilot Chatで @workspace を使用すると、プロジェクト全体をコンテキストとして渡せます。

具体的な手順

1. VS CodeでCopilotサイドバーを開く
2. @workspace を最初に入力
3. 続けて具体的な指示を記述

   @workspace
   HTMLファイル内に「グリッチアニメーションのテキスト」と「ビデオループ再生セクション」を作成してください。
   ヘッダーとナビゲーションアイコンも含めてください。

動作条件

• github.copilot.chat.codesearch.enabled が有効化されていること
• .gitignore 対象外のファイルが含まれること
• プロジェクトがGitHubリポジトリの場合、コード検索インデックスが利用可能

サンプル実行例

<!-- index.html -->
<div class="glitch-text">Hello Copilot!</div>
<section class="video-section">
  <video autoplay loop muted></video>
</section>

Copilotが自動で関連CSS/JSを参照し、必要なコードを提案します。

---

@workspace の仕組み

このコマンドは以下の情報を統合的に参照します：

情報源	内容例
ワークスペースファイル	styles.css, script.js
ディレクトリ構造	フォルダ/ファイル階層
GitHubコード検索	インデックスされたリポジトリ
シンボル定義	関数・クラス名
エディタ可視範囲	選択中のコード

---

高度なチップス

1. コンテキスト絞り込み
   特定ファイルを強調したい場合：

   @workspace @src/styles.css 
   このカラーパレットを使ってボタンを生成

2. スラッシュコマンド活用

   • /fix：エラー修正を提案
   • /explain 機能を組み合わせ可能

   @workspace /fix
   動画セクションのレスポンシブ化

3. インライン提案向上

   // script.js
   // この関数を使用して▼ (Copilotが補完提案)
   const playVideo = () => {
     document.querySelector('video').play();
   }

注意点

• 大規模プロジェクトではパフォーマンス低下の可能性あり
• プライベートコード利用時は設定の確認を推奨

---

なぜこの方法が最適か

• #codebase（2023年方式）より直感的
• ファイルコピペ不要（従来手法の課題を解決）
• 公式推奨手法で持続性あり

この手法でフロントエンドの複数ファイル連携もシームレスに実装できます。