VSCodeのCopilotを活用する6つのコツ

VSCodeのGitHub Copilotを使用する際のチェックリスト

適切なAIモデルを選択してください: 高速コーディングまたは計画/推論のためのモデルの中から選択します。
適切なモードを選択: 編集、質問をする、またはコードを書き続けるための最適なツールを使用します。
設定指示 (ルール): カスタム指示 (つまりルール) を使用して、コーディングおよび構造の標準に準拠したコードの提案を取得します。
プロンプトエンジニアリング:効果的なプロンプトを作成し、最良のレスポンスを得るためのコンテキストを提供します。
ワークスペースインデックス (Workspaceのインデックス): Codebaseに関する質問に正確なレスポンスを受け取ります。
プロンプトの再利用: プロジェクト内のタスクに特化したプロンプトを保存し再利用することで、時間を節約します。

1. 適切なAIモデルを選択

Copilotは、特定のニーズに応じて選択できるさまざまなAIモデルを提供します：

迅速なコーディング: 簡単で複雑でないコード作成タスクに適しています。
GPT-4o
GPT-4.1 (baseのGithub Copilot)
ジェミニ 2.0 フラッシュ
推論/計画: 複雑な推論や計画を必要とするタスクに適しています。
クロード・ソネット 3.7 (思考)
クロード・ソネット 4.0 (思考)
クロードオパス 4.0 思考
ジェミニ 2.5 プロ

2. 適切なモードを選択

モード	ユースケース
コード補完	コーディング中に直接インライン提案を受け取り、コメントを書いて直接コードを生成します（ファイル内で複数のタブを使用するには、設定でNESを有効にしてください）
チャット	特定の業務に基づいて各チャット会話を作成し、デザインアイデアをブレインストーミングしたり、計画を立てたり、最も正確なコード提案を受け取ったりします
編集	自然言語を使用してコード編集セッションを開始します。ワークスペース内の複数のファイルに大規模なコード変更を自動的に適用します。
エージェント	高レベルの要求を実行するためにエージェントのコーディングフローを開始します。Copilot は、計画を立て、必要なコード変更やタスクを実行するために多くのツールを自動的に呼び出します。

2.1 各モードの使用方法の詳細：

2.1.1 モードを尋ねる

使用例

複雑なコードの説明が必要です
新しい知らない概念や知識を学ぶ（ウェブサイトのドキュメントリンクを添付することをお勧めします）
デバッグ、原因を探る
特定のビジネスまたは機能のアイデアやソリューションを探してください。

利点

迅速な返信
現在のコードファイルを編集しないでください
知識に集中し、編集よりも

2.1.2 編集モード

使用例

コードの形式/構造を変更する（リファクタリングコード）
複数のファイルで小さな変更を行う
ツールやエージェントの思考を使用せずにシンプルな機能を作成する

利点

特定の詳細の小さな部分の変更に集中する
コードを受け入れる/拒否する前にプレビューがあります
エージェントモードよりリスクが少ない

2.1.3 エージェントモード

使用例

複雑な機能を複数のファイルで作成するには、構造ルールや規則に従って詳細にする必要があります。
複雑なビジネスロジックをリファクタリングします。
外部ソースからのコンテキストデータを提供する必要があります。ツール（MCPサーバー）を使用します。

利点

IDEやMCPの外部ツールを多く呼び出して、多くのステップを実行します。
文脈の全体的な理解。
自動承認設定の場合、より高い自動化能力

3. 設定手順（ルール）

Copilotがコードを生成したり質問に回答したりする際、努力します 現在のソースコードに適合させること、例えば使用するライブラリや変数の命名方法など、…. しかし、常にこの効果的に行うための十分なコンテキストがあるとは限りません。例:特定のフレームワーク（またはライブラリ）のバージョンで作業する場合は、プロンプトに追加のコンテキストを提供する必要があります。

AIのフィードバックを向上させるために、instructions filesを使用して、コーディングプラクティス、コーディングベンション、ツール、または詳細な仕様に関する文脈を提供できます。これらの指示をチャットプロンプトに添付するか、自動的に適用することができます。プロジェクト（ワークスペース）のためにグローバルなインストラクション（ルール）をファイルに追加できます .github/copilot-instructions.md

3.1 新しいインストラクション（ルール）を作成するために

コマンドを実行しますChat: New Instructions File コマンドパレットから (Ctrl/Cmd + Shift + P)
このコマンドはファイル .instructions.mdをフォルダー.github/instructions.に作成します。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.

オプション、メタデータフィールドにグロブパターンを追加します applyTo どのファイルに指示を適用するかを指定します。

—

applyTo: “**/*.ts”

—

Coding practices for TypeScript files.

…

3.2 チャット内での指示（ルール）の使用

選択 Add Context
選択 Instructions..
プロジェクトで作成されたインストラクションを選択してください

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

Copilotのレスポンスの質を向上させるために、効果的なプロンプトを使用します。よく書かれたプロンプトは、Copilotが要求をよりよく理解し、より適切なコードの提案を生成するのに役立ちます。

4.1 一般的なスタート、その後具体化

Generate a Calculator class.

Add methods for addition, subtraction, multiplication, division, and factorial.

Don‘t use any external libraries and don’t use recursion.

4.2 例を提供するあなたが望むこと

Generate a function that takes a string and returns the number of vowels in it.

Example:

findVowels(“hello”) returns 2

findVowels(“sky”) returns 0

4.3 複雑なタスクをより簡単なタスクに分割する

食事計画プロジェクトを作成するようにCopilotに要求する代わりに、より小さなタスクに分けてください：

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

4.4 適切な文脈とツールを提供する

正確で適切な回答を得るためには、プロンプトに対して十分で適切なコンテキストが必要です。適切なツールを使用することで、生産性 (productivity)を向上させることができます。

エージェントモード、ボタンを選択します、Select Tools…を使用して、確実に使用する必要があるツールを提供するか、# + {tool}
使用する #codebase は、Copilotがコード検索を実行することにより、適切なファイルを自動的に見つけることを許可します（どこにあるかわからない場合はAIにコードを見つけさせるために使用し、確実に知っている場合は直接コードスコープをターゲットにすべきです）
ツールを使用する #fetch （カーソルの横にウェブサイトのリンクを入れるだけです）または @web）を使ってウェブページからコンテンツを取得するか、 #githubRepoを使用してGitHubリポジトリでコードを検索します。
プロンプトにファイル、フォルダー、またはシンボルを参照として追加するには、#、#または(例:#sym:handleCreateXXX).ファイル、フォルダー、または編集中のタブをチャットプロンプトにドラッグ＆ドロップして、修正に関連する部分や質問の説明を提供します。問題、テストの失敗、またはターミナルの出力をチャットプロンプトに追加して、エラーが発生しているシナリオの具体的なコンテキストを十分に得てください。
プロンプトに画像やスクリーンショットを追加して、Copilotに画像を分析させることができます。
エージェントモード、プロンプトプレビュープロジェクトを直接開くために、vscodeに内蔵されたブラウザを使用してください。

使用する場合エージェントモード、Copilotは自動的に適切なファイルとコンテキストを検索します（この方法は研究時間の最適化のためで、対象が一定の範囲に達したら、正確な結果を得るために新しいチャットセッションで適切なコンテキストをターゲットにするべきです – トリック: あらかじめ調査して、内容をファイル.mdに書き込んだ後、別のチャットセッションでエージェントに分析と修正を依頼します（カーソルは他のチャットからコンテキスト@Past Chatsを追加できます）。

4.4.1 コードベース (ワークスペース) コンテキストのヒントとコツ

質問の表現方法は品質に大きな影響を与える可能性がありますコンテキストと回答の正確性に。結果を最適化するために、以下のヒントを使用してください：

関連する文脈を明確に含めるには、コードを選択したり、次のようなチャット変数に言及してください #editor #selection または #<file name>
レスポンスは複数の参照から取得できる場合があります。たとえば、find exceptions without a catch block（キャッチブロックなしで例外を見つける）や provide examples of how handleError is called（handleErrorがどのように呼ばれるかの例を提供する）。ただし、コード全体の分析を期待しないでください、たとえばhow many times is this function invoked?（この関数は何回呼ばれますか？）や rectify all bugs in this project（このプロジェクトのすべてのバグを修正する）。
コードの外での情報を提供しないでください（現在）、例えば who contributed to this file?(このファイルに誰が貢献したか？) または summarize review comments for this folder(このフォルダーのレビューコメントを要約する)。

4.4.2 変数の使用#codebaseを使用して、全体のソースコードを参照します（カーソル内の/path-base-folder）

Where is the database connection string used in #codebase?

4.4.3 シンボルを使用してコンテキストにコード選択を提供する:

use function #sym:handleCreateXXX for refactor #create-xxx.ts

コードの範囲をシンボルでターゲットする方法（シンボルは変数、関数、クラス、メソッド、またはワークスペース内の他の名前付き要素になることがあります）
方法 1: # + {symbol}を使って、その後 tabを押します。例: #handleCreateXXX , #DEFAULT_HEIGHT
方法 2: Add context → Symbols… → 変数名、関数名などを入力 → enter

カーソルIDE

方法1：@ + {symbol}(ターゲットを各シンボル1つずつ指定)

方法2：クリックAdd context → Code → 変数名、関数名、…を入力 → チェックボックス（複数のシンボルを選択可能）

4.5 希望が達成されるまでプロンプトを繰り返す

その他のプロンプトを追加して、レスポンスを調整（refine）または修正（modify）します。例えば：

チャットプロンプト 1: “数の階乗を計算する関数を書く” → レスポンス
チャットプロンプト 2: “再帰を使わず、キャッシングを使って最適化する” → 応答
チャットプロンプト 3: “意味のある変数名を使用する” → レスポンス

4.6 チャット履歴を保持する

Copilotは同じチャット会話内の履歴を使用して文脈を提供します（これをcontext windowsと呼びます）。したがって、関連しない場合は履歴から以前の質問や回答を削除して、あいまいなレスポンスが生成されることや文脈を外れることを防ぐ必要があります（既存の文脈を短くする必要があります）。

あるいは、新しいタスクや新しい質問のコンテキストを変更したい場合は、新しいチャット会話を作成してください。

5. ワークスペースインデックス

Copilotは、ソースコード内で迅速かつ正確に検索するためにインデックスを使用します（私の理解では、Cursor IDEや他のAIコードも同様です）:

リモートインデックス: GitHub のリポジトリのために (vscode に github アカウントでログインしている場合)、GitHub のコードを使用してコードベース全体のインデックスを作成し、Copilot が大きなソースコードでも迅速に検索できるようにします。
ローカルインデックス: GitHub以外のリポジトリ用（vscodeでgithubアカウントにログインしていないか、gitlabにコードがある場合、…）、Copilotはローカルでインデックスを作成し、効果的なコード検索をサポートします（大量のコードには対応していません）。

5.1 インデクシングの詳細 (Codebase indexing)

Codebase機能は、言語モデル（LLM）のコンテキストに全コードを伝えません。それに代わって、スマート検索メカニズムを使用して、codebaseで検索した後に情報を抽出して効率的に使用します。

5.1.1 CodebaseのVSCode CopilotやCursor IDEでの動作方法

インデックス作成と埋め込み:

プロジェクトを開くと、Cursorはコードベース全体をインデックス化し、ソースコードを小さなセクションに分割し、それぞれのセクションの埋め込みを計算します。Cursorはインデックス化のプロセスを使用して、プロジェクトの構造を分析し理解します。それには以下が含まれます：1. ファイル構造
2. 関数とクラスの定義
3.変数の宣言
4.ソースコードの各部分の関係
これらの埋め込みは、行の位置とファイルの相対パスに関する情報とともに、クラウド上のベクターデータベースに保存されます。

コンテキストに基づく情報の取得:

質問やソースコードに関するリクエストをすると、Cursorは保存された埋め込みを使用して関連するコードスニペットを取得し、言語モデルのコンテキストに必要な部分だけを提供します。

コンテキストの制限:

大規模言語モデル（LLMs）にはコンテキストのサイズに制限があるため、全体のコードベースを送信することは不可能です。その代わりに、Cursorはプロンプトの要求に直接関連するコード部分のみをコンテキストに追加します。

概要: カーソルのコードベースは、インデックスを基にしてプロンプトがどのファイルにあるかをテキスト検索し（検索の詳細は、埋め込みに基づく意味検索）、そのファイルの内容や関数コードや変数をコンテキストに渡します。コードベースのインデックスは、ソースコードを理解するためのものではありません。ref: codebase indexing

6. プロンプトの再利用

ファイルプロンプトは、特定のタスクのコンテキストと指示を含むプロンプトをMarkdownファイルに保存することを許可します。そのプロンプトはチャット内で添付および再利用できます。ワークスペースにプロンプトを保存すると、それをチームと共有することもできます。

6.1 再利用可能なプロンプトの作成 (プロンプトテンプレート)

プロンプトファイルを作成するには、Chat: New Prompt Fileをコマンドパレットで選択します (Ctrl/Cmd + Shift + P)
このコマンドはファイル .prompt.md を作成します .github/prompts ディレクトリ内のルートワークスペースで。プロンプトと関連するコンテキストを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