VS Code で編集モードを使用する
Visual Studio Code のチャット編集モードを使用すると、自然言語を使ってプロジェクト内の複数のファイルにまたがって編集できます。編集はエディターに直接適用され、周囲のコードの完全なコンテキストとともにその場で確認できます。
特定のファイルを選択し、明確なコンテキストを提供することで、編集モードを誘導して、的を絞ったコード変更や改善を行わせることができます。
前提条件
- Visual Studio Code の最新バージョンをインストールします
- Copilotへのアクセス。Copilot無料プランでは、月ごとの補完とチャットインタラクションの制限が適用されます。
編集モードを使用する理由
編集モードは、プロジェクト内の複数のファイルにまたがるコード編集を行うために最適化されています。VS Code はコードの変更をエディターに直接適用し、その場で確認できます。編集モードを使用して、次のことができます。
- 「これを async/await を使ってリファクタリングして」や「データベース接続にシングルトン パターンを使用して」など、コードベースの一部をリファクタリングする。
- 「アプリにログイン フォームを追加して」など、コードベースに新しい機能を追加する。
- 「入力が空の場合、ソート関数が失敗するのを修正して」など、コードベースのバグを修正する。
- 「vitest を使って calculator クラスの単体テストを追加して」など、コードの単体テストを作成する。
- 「calculate 関数を最適化して、より効率的にして」など、コードのパフォーマンスを向上させる。
編集モードは、行いたい変更と編集したいファイルがよくわかっているコーディング タスクに特に役立ちます。タスクが明確に定義されていない場合、高レベルの要件がある場合、またはターミナル コマンドやツールの実行も必要な変更がある場合は、代わりにエージェント モードを使用することをお勧めします。
編集モードを使用する
編集モードでは、編集するファイルを選択し、関連するコンテキストとプロンプトを提供します。VS Code はプロンプトに基づいてコードの編集を提案します。
-
チャット ビューを開き (⌃⌘I (Windows、Linux Ctrl+Alt+I))、チャット モード セレクターから [編集] を選択します。
-
[コンテキストの追加] を選択するか、特定のワークスペース ファイルやコンテキスト項目を #-メンションして、プロンプトに追加のコンテキストを提供します。
コンテキストを追加することで、より関連性の高い応答を得ることができます。たとえば、現在のプロジェクトに固有の質問をするには、
#codebaseコンテキスト項目を使用できます。チャット入力フィールドに#を入力すると、利用可能なコンテキスト項目の一覧が表示されます。アクティブなエディターは、自動的にコンテキストとして追加されます。ファイルを追加すると、他の関連ファイルが提案される場合があります。
-
チャット入力フィールドにプロンプトを入力して、行いたい編集の種類を示します。
開始するには、これらの質問例のいくつかを試してみてください。
calculate 関数をリファクタリングして、より効率的にしてください。アプリにログイン フォームを追加してください。認証には OAuth を使用してください。calculator クラスの単体テストを追加してください。テスト フレームワークとして vitest を使用してください。
-
VS Code が提案された編集をエディターに直接ストリーミングすることに注意してください。
チャット ビューには、編集されたファイルの一覧が太字で表示されます。エディターのオーバーレイ コントロールを使用すると、提案された編集間を移動できます。
-
提案された編集を確認し、提案された編集を承認または破棄します。
-
コードの変更を繰り返し、編集を洗練させたり、追加機能を実装したりし続けます。
編集の承認または破棄
VS Code は、チャット ビューの変更されたファイルの一覧に、編集されたファイルをリストアップします。保留中の編集があるファイルには、エクスプローラー ビューとエディターのタブにもインジケーターが表示されます。
エディターのオーバーレイ コントロールでは、Up () と Down () コントロールを使用して、提案された編集間を移動できます。特定のファイルに対する編集を承認または拒否するには、[保持] または [元に戻す] ボタンを使用します。
エディターまたはチャット ビューの [保持] または [元に戻す] コントロールを使用して、個々の、またはすべての提案された編集を承認または拒否します。
chat.editing.autoAcceptDelay 設定を使用すると、提案された編集が自動的に承認されるまでの遅延を設定できます。エディターのオーバーレイ コントロールにカーソルを合わせると、自動承認のカウントダウンをキャンセルできます。
VS Code を閉じると、保留中の編集の状態が記憶されます。VS Code を再度開くと、保留中の編集が復元され、引き続き編集を承認または破棄できます。
編集を元に戻す
コードを編集するリクエストを送信していると、これらの変更の一部をロールバックしたくなる場合があります。たとえば、別の実装戦略を使用したい場合や、AI が編集を生成する際に誤った方向に進み始めた場合などです。
チャット ビューのタイトル バーにある [最後の編集を元に戻す] コントロールを使用すると、最後の編集を元に戻し、最後のリクエストを送信する前の状態に戻すことができます。最後の編集を元に戻した後、チャット ビューのタイトル バーにある [最後の編集をやり直す] コントロールを使用して、それらの編集を再度やり直すことができます。
また、チャット ビューでリクエストにカーソルを合わせると表示される [編集を元に戻す (削除)] コントロール (x アイコン) を使用して、そのリクエスト以降に行われたすべての編集を元に戻すこともできます。
指示を使用して、コーディング スタイルに従った AI 編集を取得する
コーディング スタイル、好みのフレームワーク、その他の設定に従った AI が生成したコード編集を取得するには、指示ファイルを使用できます。指示ファイルを使用すると、コーディング スタイルと設定を Markdown ファイルで記述でき、AI はそれを使用して要件に一致するコード編集を生成します。
指示ファイルを手動でチャット プロンプトにコンテキストとして添付するか、指示ファイルが自動的に適用されるように構成できます。
次のコード スニペットは、コーディング スタイルと設定を記述した指示ファイルの例を示しています。
---
applyTo: "**"
---
# Project general coding standards
## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants
## Error Handling
- Use try/catch blocks for async operations
- Implement proper error boundaries in React components
- Always log errors with contextual information
指示ファイルの使用の詳細については、こちらをご覧ください。
設定
次の一覧には、編集モードに関連する設定が含まれています。設定は、設定エディター (⌘, (Windows、Linux Ctrl+,)) を通じて構成できます。
- chat.editing.confirmEditRequestRemoval - 編集を元に戻す前に確認を求めます (既定値:
true)。 - chat.editing.confirmEditRequestRetry - 最後の編集のやり直しを実行する前に確認を求めます (既定値:
true)。 - chat.editing.autoAcceptDelay - 提案された編集が自動的に承認されるまでの遅延を設定します。ゼロを使用すると自動承認が無効になります (既定値: 0)。
- github.copilot.chat.codesearch.enabled (プレビュー) - エージェント モードの動作と同様に、プロンプトに
#codebaseを追加したときに VS Code に適切なファイルを見つけさせます (既定値:false)。
よくある質問
エージェント モードではなく編集モードを使用する理由
編集モードとエージェント モードのどちらかを選択するには、次の基準を考慮してください。
- 編集範囲: リクエストがコード編集のみに関係し、変更の正確な範囲がわかっている場合は、編集モードを使用するかもしれません。
- 期間: エージェント モードはリクエストを処理するために複数のステップを伴うため、応答を得るのに時間がかかる場合があります。たとえば、関連するコンテキストと編集するファイルを決定し、行動計画を決定するなどです。
- 非決定性: エージェント モードは生成された編集の結果を評価し、複数回繰り返す場合があります。その結果、エージェント モードは編集モードよりも非決定性が高くなる可能性があります。
- リクエスト クォータ: エージェント モードでは、タスクの複雑さに応じて、1 つのプロンプトがバックエンドへの多くのリクエストになる可能性があります。