VS Code の Copilot のヒントとコツ

この記事では、Visual Studio Code で GitHub Copilot を使用する際の開発体験を最適化するためのヒントとコツを紹介します。

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

Copilot を最大限に活用するために、次のチェックリストを使用してください

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

2. Copilot をパーソナライズする。カスタム指示を使用して、自分のスタイルやコーディング習慣に合ったコード提案を取得します。

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

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

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

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

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

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

指示ファイルで Copilot をパーソナライズする

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

AI の応答を強化するために、指示ファイルを使用して、チームのコーディング習慣、ツール、またはプロジェクトの仕様に関するコンテキストの詳細を提供できます。その後、これらの指示をチャットプロンプトに添付したり、自動的に適用させたりすることができます。

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

1. コマンド パレットから Chat: New Instructions File コマンドを実行します。

   このコマンドは .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 ツールを使用して Web ページからコンテンツを取得するか、#githubRepo を使用して GitHub リポジトリでコード検索を実行します。
• #<ファイル名>、#<フォルダ名>、または #<シンボル> を使用して、プロンプトでファイル、フォルダ、またはシンボルを参照します。
• ファイル、フォルダ、またはエディターのタブをチャット プロンプトにドラッグ アンド ドロップします。
• 問題、テストの失敗、またはターミナル出力をチャット プロンプトに追加して、シナリオ固有のコンテキストを提供します。
• プロンプトに画像やスクリーンショットを追加して、Copilot に画像を分析させます。
• エージェント モードでは、アプリをプレビューするようにプロンプトを出すと、組み込みの簡易ブラウザーで直接開くことができます。

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

チャット プロンプトにコンテキストを追加するに関する詳細情報を取得します。

再利用可能なプロンプト

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

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

1. コマンド パレットの Chat: New Prompt File コマンドでプロンプト ファイルを作成します。

   このコマンドは、ワークスペースのルートにある .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', '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 チャットのプロンプト エンジニアリング
• GitHub Copilot ドキュメントの GitHub Copilot を使用するためのベスト プラクティス
• VS Code で Copilot をパーソナライズする