🚀 VS Codeでで入手しましょう!

VS CodeのCopilotのヒントとコツ

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

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

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

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

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

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

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

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

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

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

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

ツール ユースケース
コード補完 フローを維持しながらコーディングを効率化します。
エディターでコードスニペット、変数名、関数を記述するときに、インライン候補を受け取ります。
チャット 設計アイデアをブレインストーミングしたり、コード候補を取得したりするために、継続的なチャット会話を行い、オプションでドメイン固有のチャット参加者を呼び出します。
特定のコード候補をコードベースに適用することを選択します。
編集 自然言語を使用して、コーディング編集セッションを開始します。
ワークスペース内の複数のファイルにわたって、大規模なコード変更を自動的に適用します。
エージェントモード エージェントコーディングフローを開始して、高レベルの要件を実装します。
Copilotは、必要なコード変更とタスクを計画および実装するために、複数のツールを自律的に呼び出します。

カスタム指示でCopilotをパーソナライズする

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

Copilotの応答を向上させるために、カスタム指示を使用して、チームのワークフロー、ツール、またはプロジェクトの具体的な詳細に関するコンテキストの詳細を提供できます。 Copilotは、これらのカスタム指示をすべてのリクエストに組み込みます。

ワークスペースのカスタム指示を有効にするには

  1. ワークスペースのルートに.github/copilot-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.
    

VS CodeでCopilotのカスタム指示を使用する方法の詳細をご覧ください。

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

効果的なプロンプトを使用することで、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に食事プランナーアプリを生成するように依頼する代わりに、より小さなタスクに分割します

    • 材料のリストを受け取り、レシピのリストを返す関数を生成します。
    • レシピのリストを受け取り、買い物リストを返す関数を生成します。
    • レシピのリストを受け取り、1週間の食事プランを返す関数を生成します。
  • コードの選択、ファイル、ターミナルの出力など、適切なコンテキストを提供します。

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

    Where is the database connection string used in #codebase?
    
  • プロンプトを反復処理します。

    応答を洗練または変更するために、フォローアッププロンプトを提供します。 例:

    • 「数値の階乗を計算する関数を作成します。」
    • 「再帰を使用せず、キャッシングを使用して最適化します。」
    • 「意味のある変数名を使用します。」
  • チャット履歴を関連性の高い状態に保ちます。

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

プロンプトエンジニアリングの詳細をご覧ください。

GitHub Copilotドキュメントで、Copilotで使用するプロンプトの実用的な例を見つけてください。

適切なコンテキストを提供する

Copilotからより正確で関連性の高い応答を得るために、関連するコンテキストでプロンプトを充実させます。

  • #codebase変数を使用して、Copilotが適切なファイルを自動的に見つけられるようにします。
  • #fetch変数を使用して、Webページからコンテンツを取得します。
  • #fileまたは#symチャット変数を使用して、プロンプトでファイルまたはシンボルを参照します。
  • ファイル、フォルダー、またはエディタータブをチャットプロンプトにドラッグアンドドロップします。
  • シナリオ固有のコンテキストのために、問題、テストの失敗、またはターミナルの出力をチャットプロンプトに追加します。
  • 画像またはスクリーンショットをプロンプトに追加して、Copilotに画像を分析させます。

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

チャットプロンプトにコンテキストを追加する方法の詳細をご覧ください。

再利用可能なプロンプト

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

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

  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. プロンプトをチャットのコンテキストとして追加します。

再利用可能なプロンプトを始めましょう。

AIモデルを選択する

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

モデルタイプ モデル
高速コーディング
  • GPT-4o
  • Claude Sonnet 3.5
  • Claude Sonnet 3.7
  • Gemini 2.0 Flash
推論/計画
  • Claude Sonnet 3.7 Thinking
  • o1
  • o3-mini

チャット入力フィールドのモデルピッカーを使用して、ニーズに最適なモデルを選択します。

GitHub Copilotドキュメントで、CopilotチャットのAIモデルの詳細をご覧ください。

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

Copilotは、インデックスを使用して、コードベースから関連するコードスニペットを迅速かつ正確に検索します。 このインデックスは、GitHubによって管理することも、ローカルマシンに保存することもできます。

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

ワークスペースのインデックス作成の詳細をご覧ください。