VS Code で Copilot を活用するためのヒントとテクニック

この記事では、Visual Studio Code で GitHub Copilot を使用する際の開発エクスペリエンスを最適化するためのヒントとテクニックを紹介します。

VS Code で Copilot を使用するためのチェックリスト

Copilot を最大限に活用するには、以下のチェックリストを使用してください。

1. 適切な Copilot ツールを選択する。編集、質問、またはコード作成の流れを維持するのに最適化されたツールを使用します。

2. Copilot をカスタマイズする。カスタム指示を使用して、自分のスタイルやコーディングプラクティスに合ったコード候補を取得します。

3. 効果的なプロンプトを作成し、コンテキストを提供する。最も関連性の高い応答を得ます。

4. ワークスペースをインデックス化する。コードベースに関する質問に対して正確な応答を受け取ります。

5. AI モデルを選択する。高速コーディング用または計画/推論用のモデルから選択します。

6. プロンプトを再利用する。タスク固有のプロンプトを保存してチーム全体で再利用することで時間を節約します。

適切な Copilot ツールを選択する

タスクに応じて、さまざまな Copilot ツールから選択できます。

指示ファイルを使用して Copilot をカスタマイズする

Copilot がコードを生成したり質問に答えたりする際、使用するライブラリや変数の命名方法など、あなたのコーディングプラクティスや好みに合わせようとします。しかし、常に効果的に行うのに十分なコンテキストを持っているとは限りません。たとえば、特定のフレームワークバージョンを使用している場合、プロンプトに追加のコンテキストを提供する必要があります。

AI の応答を向上させるために、チームのコーディングプラクティス、ツール、またはプロジェクトの特定の詳細に関するコンテキスト情報を提供するために、指示ファイルを使用できます。これらの指示をチャットプロンプトに添付するか、自動的に適用させることができます。

ワークスペースで指示ファイルを有効にするには

1. コマンドパレットから チャット: 新規指示ファイル コマンドを実行します。

   このコマンドは、.github/instructions フォルダーに .instructions.md ファイルを作成します。

2. 指示を Markdown 形式でファイルに追加します。例:

   # Custom instructions for Copilot
   
   ## Project context
   This project is a web application built with React and Node.js.
   
   ## Indentation
   We use tabs, not spaces.
   
   ## Coding style
   Use camelCase for variable names and prefer arrow functions over traditional function expressions.
   
   ## Testing
   We use Jest for unit testing and Playwright for end-to-end testing.
   

3. 必要に応じて、指示が適用されるファイルを指定するために、applyTo メタデータフィールドにグロブパターンを追加します。

   ---
   applyTo: "**/*.ts"
   ---
   Coding practices for TypeScript files.
   ...
   

VS Code での指示ファイルの使用についてさらに詳しく知る。

プロンプトエンジニアリング

効果的なプロンプトを使用することで、Copilot の応答の品質を向上させることができます。適切に作成されたプロンプトは、Copilot があなたの要件をよりよく理解し、より関連性の高いコード候補を生成するのに役立ちます。

• 最初は一般的、次に具体的になります。

  Generate a Calculator class.
  Add methods for addition, subtraction, multiplication, division, and factorial.
  Don't use any external libraries and don't use recursion.
  

• 希望するものの例を挙げます。

  Generate a function that takes a string and returns the number of vowels in it.
  Example:
  findVowels("hello") returns 2
  findVowels("sky") returns 0
  

• 複雑なタスクをより単純なタスクに分解します。

  Copilot に食事プランナーアプリを生成するよう依頼する代わりに、それを小さなタスクに分解します。

  • 材料のリストを受け取り、レシピのリストを返す関数を生成します。
  • レシピのリストを受け取り、買い物リストを返す関数を生成します。
  • レシピのリストを受け取り、週の食事プランを返す関数を生成します。

• コード選択、ファイル、ターミナル出力などの適切なコンテキストを提供します。

  例: #codebase 変数を使用してコードベース全体を参照します。

  Where is the database connection string used in #codebase?
  

• プロンプトを繰り返します。

  応答を絞り込んだり変更したりするために、フォローアッププロンプトを提供します。例:

  • "数値の階乗を計算する関数を記述してください。"
  • "再帰を使用せず、キャッシュを使用して最適化してください。"
  • "意味のある変数名を使用してください。"

• チャット履歴を関連性の高いものに保ちます。

  Copilot は会話の履歴を使用してコンテキストを提供します。関連性のない過去の質問や応答は履歴から削除してください。または、コンテキストを変更したい場合は新しいセッションを開始してください。

プロンプトエンジニアリングについてさらに詳しく知る。

GitHub Copilot ドキュメントで、Copilot で使用するプロンプトの具体的な例を見つけることができます。

適切なコンテキストとツールを提供する

関連するコンテキストでプロンプトを充実させ、チャットでより正確で関連性の高い応答を得ます。適切なツールを使用することで、開発者の生産性を向上させることができます。

• エージェントモードでは、ツールボタンを選択して使用したいツールを設定するか、明示的にプロンプトに追加します。
• #codebase を使用して、Copilot がコード検索を実行することで適切なファイルを自動的に見つけられるようにします。
• #fetch ツールを使用してウェブページからコンテンツを取得するか、#githubRepo を使用して GitHub リポジトリでコード検索を実行します。
• プロンプトで #<ファイル名>、#<フォルダー名>、または #<シンボル> を使用してファイル、フォルダー、またはシンボルを参照します。
• ファイル、フォルダー、またはエディタータブをチャットプロンプトにドラッグアンドドロップします。
• 問題、テストの失敗、またはターミナル出力をチャットプロンプトに追加して、シナリオ固有のコンテキストを提供します。
• プロンプトに画像やスクリーンショットを追加して、Copilot に画像を分析させます。
• エージェントモードでは、アプリをプレビューするプロンプトを出し、組み込みのシンプルなブラウザで直接開くことができます。

エージェントモードを使用すると、Copilot は関連するファイルとコンテキストを自律的に見つけます。

チャットプロンプトへのコンテキストの追加についてさらに詳しく知る。

再利用可能なプロンプト

プロンプトファイルを使用すると、特定のタスクのプロンプトを、そのコンテキストと指示とともに Markdown ファイルに保存できます。その後、そのプロンプトをチャットに添付して再利用できます。プロンプトをワークスペースに保存すると、チームと共有することもできます。

再利用可能なプロンプトを作成するには

1. コマンドパレットで チャット: 新規プロンプトファイル コマンドを使用してプロンプトファイルを作成します。

   このコマンドは、ワークスペースのルートにある .github/prompts フォルダーに .prompt.md ファイルを作成します。

2. プロンプトと関連するコンテキストを Markdown 形式で記述します。

   たとえば、このプロンプトを使用して新しい React フォームコンポーネントを生成します。

   Your goal is to generate a new React form component.
   
   Ask for the form name and fields if not provided.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   * Prefer *uncontrolled* components using register
   * Use `defaultValues` to prevent unnecessary rerenders
   * Use `yup` for validation:
   * Create reusable validation schemas in separate files
   * Use TypeScript types to ensure type safety
   * Customize UX-friendly validation rules
   

3. 必要に応じて、チャットでプロンプトを実行する方法に関するメタデータを追加します。mode フィールドを使用してチャットモードを指定し、tools フィールドを使用して使用するエージェントモードツールを指定します。

   ---
   mode: 'agent'
   tools: ['githubRepo', 'search/codebase']
   description: 'Generate a new React form component'
   ---
   Your goal is to generate a new React form component based on the templates in #githubRepo contoso/react-templates.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   

4. チャット入力フィールドに / に続けてプロンプトファイル名を入力してコマンドを実行します。

   たとえば、/new-react-form と入力すると、new-react-form.prompt.md という名前のプロンプトファイルが実行されます。

プロンプトファイルを使い始める。

AI モデルを選択する

Copilot はさまざまな AI モデルを提供しており、選択できます。一部のモデルは高速コーディングタスクに最適化されていますが、他のモデルはより時間のかかる計画および推論タスクに適しています。

チャット入力フィールドのモデルピッカーを使用して、ニーズに最も合ったモデルを選択してください。

GitHub Copilot ドキュメントで、Copilot Chat の AI モデルについてさらに詳しく知る。

ワークスペースのインデックス作成

Copilot は、コードベースから関連するコードスニペットをすばやく正確に検索するためにインデックスを使用します。このインデックスは、GitHub によって維持されるか、マシンにローカルに保存されます。

GitHub リポジトリの場合、GitHub コード検索に基づいた、ワークスペースのリモートインデックスを使用できます。これにより、コードベースが非常に大きい場合でも、Copilot はコードベース全体を非常にすばやく検索できます。

ワークスペースのインデックス作成についてさらに詳しく知る。

関連リソース

• Copilot Chat のプロンプトエンジニアリング
• GitHub Copilot ドキュメントのGitHub Copilot を使用するためのベストプラクティス
• VS Code で Copilot をカスタマイズする