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 は、チャットビューの変更されたファイルリストに編集されたファイルを一覧表示します。保留中の編集があるファイルには、エクスプローラービューとエディタータブにもインジケーターが表示されます。
エディターオーバーレイコントロールを使用すると、上 () および 下 () コントロールを使用して、提案された編集間を移動できます。保持または元に戻すボタンを使用して、特定のファイルの編集を適用または拒否します。
エディターまたはチャットビューの保持または元に戻すコントロールを使用して、個々またはすべての提案された編集を適用または拒否します。
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 を使用します (既定値: 0)。
- github.copilot.chat.codesearch.enabled (プレビュー) -
#codebaseをプロンプトに追加すると、エージェントモードの動作と同様に、VS Code が適切なファイルを見つけられるようにします (既定値:false)。
よくある質問
エージェントモードではなく、編集モードを使用するのはなぜですか？
編集モードとエージェントモードのどちらを選択するかについて、以下の基準を考慮してください
- 編集範囲: リクエストがコード編集のみを含み、変更の正確な範囲がわかっている場合は、編集モードを使用する場合があります。
- 期間: エージェントモードはリクエストを処理するために複数のステップを伴うため、応答を得るのに時間がかかる場合があります。たとえば、関連するコンテキストや編集するファイルを決定したり、アクションプランを決定したりするなどです。
- 非決定性: エージェントモードは生成された編集の結果を評価し、複数回イテレーションを行う場合があります。その結果、エージェントモードは編集モードよりも非決定性になる可能性があります。
- リクエストクォータ: エージェントモードでは、タスクの複雑さによっては、1つのプロンプトで多数のバックエンドリクエストが発生する場合があります。