これでHTMLとCSSが完成しましたが、念の為コードに問題がないか確認を行います。
このカリキュラムでは、その際に使うファイル添付機能について学びます。
ファイル添付機能とは
CSSを作成する際、GitHub Copilotは開いているファイルを参照してコードを提案するということを学びました。今回はHTMLとCSSの2つのファイルに問題がないかを確認したいので、2つのファイルを参照して、コードの確認をしてもらう必要があります。
ですが、VSCodeではどちらか一つのファイルしか開けません。また、そもそも表示されているコードのみしか参照されないので、ファイルに記述されている全てのコードを参照させる必要があります。
今回のように複数のファイルを参照させて、提案をしてもらうにはファイル添付機能を使います。
ファイルの添付方法
参照させたいファイルを添付するにはいくつか方法があります。
クリップアイコン
プロンプト入力欄に表示されているクリップアイコンをクリックすると添付させたいファイルを選択することができます。
クリックをすると、以下の動画のようにファイルを選択でき、選択したファイルはプロンプト入力欄に表示されます。複数のファイルを選択でき、「x」ボタンをクリックすることで、参照から外すこともできます。
ドラッグ
添付したいファイルをプロンプト欄にドラッグして追加することもできます。
#を入力
プロンプト欄に#と打ち込むと添付させたいファイル一覧が表示されるので、そこから選択する方法です。
ファイル添付機能を使ってみよう
それではファイル添付機能を使い、作成したHTMLとCSSのコードを確認してみます。
回答を確認するとしっかりと添付した2つのファイルを参照して、回答をしてくれているのが確認できます。
それではファイル添付機能を使い、HTMLとCSSのコードを参照し正しく作成されているか確認をしてみましょう。
プロンプト：
上の画像のようにファイルが添付されているのが確認でき、回答が返ってくるか確認しましょう。
この記事のまとめ
- 複数のファイルを参照させたい場合はファイル添付機能を使います。
- 添付するには、「クリップアイコンをクリック」「ドラッグ＆ドロップ」「#を入力」の３つの方法があります。
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します