VS Code で AI 応答をカスタマイズする
Visual Studio Code のチャットは、適切なコンテキストを与えれば、あなたのコーディング習慣やプロジェクト要件に一致した応答やコード生成ができます。この情報をすべてのチャットプロンプトに繰り返し追加する代わりに、このコンテキストをファイルに保存し、すべてのチャットリクエストに自動的に含めることができます。この記事では、カスタム指示とプロンプトファイルを使用して VS Code で AI の応答をカスタマイズする方法を学びます。
Visual Studio Code で AI の応答をカスタマイズするには、主に 3 つの方法があります
-
カスタム指示: コードの生成、コードレビューの実行、コミットメッセージの生成などのタスクに対する共通のガイドラインやルールを定義します。カスタム指示は、AI が操作を実行すべき条件 (タスクをどのように行うべきか) を記述します。カスタム指示を定義する方法を学びます。VS Code は、あなたのコーディング習慣やプロジェクト要件に一致するワークスペース用のカスタム指示ファイルを生成することも支援します。
シナリオ例
- コーディングの慣習、優先される技術、またはプロジェクト要件を指定し、生成されるコードがあなたの標準に従うようにします。
- セキュリティの脆弱性やパフォーマンス問題のチェックなど、コードレビューのルールを設定します。
- コミットメッセージやプルリクエストのタイトルと説明を生成するための指示を提供します。
-
プロンプトファイル: コード生成やコードレビューの実行など、一般的なタスクのための再利用可能なプロンプトを定義します。プロンプトファイルは、チャットで直接実行できるスタンドアロンのプロンプトです。それらは実行されるべきタスク (何をすべきか) を記述します。オプションで、タスクをどのように実行すべきかについてのタスク固有のガイドラインを含めるか、プロンプトファイル内でカスタム指示を参照することができます。プロンプトファイルを作成する方法を学びます。
シナリオ例
- 新しいコンポーネント、API ルートのスキャフォールディング、またはテストの生成など、一般的なコーディングタスクのための再利用可能なプロンプトを作成します。
- コードの品質、セキュリティの脆弱性、またはパフォーマンスの問題のチェックなど、コードレビューを実行するためのプロンプトを定義します。
- 複雑なプロセスやプロジェクト固有のパターンのためのステップバイステップガイドを作成します。
- 実装計画、アーキテクチャ設計、または移行戦略を生成するためのプロンプトを定義します。
-
カスタムチャットモード: チャットの動作方法、使用できるツール、およびコードベースとの対話方法を定義します。各チャットプロンプトは、リクエストごとにツールや指示を設定する必要なく、チャットモードの境界内で実行されます。
シナリオ例
- AI がコードベースへの読み取り専用アクセス権を持ち、実装計画のみを生成できる計画用のチャットモードを作成します。
- AI が新しい技術を調査したり情報を収集したりするために外部リソースにアクセスできるリサーチチャットモードを定義します。
- AI がフロントエンド開発に関連するコードのみを生成および変更できるフロントエンド開発者チャットモードを作成します。
カスタム指示
カスタム指示を使用すると、特定のコーディング慣行や技術スタックに合わせた応答を得るための共通のガイドラインやルールを記述できます。このコンテキストをすべてのチャットクエリに手動で含める代わりに、カスタム指示はすべてのチャットリクエストにこの情報を自動的に組み込みます。
カスタム指示は、コード補完には考慮されません。
カスタム指示の種類
VS Code はカスタム指示を定義するための複数の方法をサポートしています
カスタム指示の種類 | 説明 |
---|---|
.github/copilot-instructions.md ファイル |
|
.instructions.md ファイル |
|
VS Code の設定 |
|
これらのアプローチを組み合わせてカスタム指示を定義することができ、すべての指示はチャットリクエストに含まれます。指示に特定の順序や優先順位は適用されないため、ファイル間で矛盾する指示がないように注意してください。
カスタム指示の例
以下の例は、カスタム指示の使用方法を示しています
例: 一般的なコーディングガイドライン
---
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
例: TypeScript と React のコーディングガイドライン
これらの指示が一般的なコーディングガイドラインファイルを参照していることに注意してください。指示を複数のファイルに分割して、整理し、特定のトピックに集中させることができます。
---
applyTo: "**/*.ts,**/*.tsx"
---
# Project coding standards for TypeScript and React
Apply the [general coding guidelines](./general-coding.instructions.md) to all code.
## TypeScript Guidelines
- Use TypeScript for all new code
- Follow functional programming principles where possible
- Use interfaces for data structures and type definitions
- Prefer immutable data (const, readonly)
- Use optional chaining (?.) and nullish coalescing (??) operators
## React Guidelines
- Use functional components with hooks
- Follow the React hooks rules (no conditional hooks)
- Use React.FC type for components with children
- Keep components small and focused
- Use CSS modules for component styling
.github/copilot-instructions.md
ファイルを使用する
カスタム指示をワークスペースやリポジトリの .github/copilot-instructions.md
ファイルに保存し、Markdown を使用してコーディングの慣習、優先する技術、プロジェクト要件を記述できます。これらの指示は、ファイルが置かれているワークスペースにのみ適用されます。
VS Code は、.github/copilot-instructions.md
ファイルからの指示をすべてのチャットリクエストに自動的に含め、コード生成に適用します。
.github/copilot-instructions.md
ファイルを使用するには
-
github.copilot.chat.codeGeneration.useInstructionFiles 設定を
true
に設定して、VS Code がすべてのチャットリクエストにcopilot-instructions.md
ファイルを自動的に使用するように指示します。 -
ワークスペースのルートに
.github/copilot-instructions.md
ファイルを作成します。必要に応じて、まず.github
ディレクトリを作成します。 -
自然言語と Markdown 形式を使用して指示を記述します。
指示間の空白は無視されるため、指示は単一の段落として書いたり、各行に書いたり、読みやすさのために空白行で区切ったりすることができます。
Visual Studio および GitHub.com の GitHub Copilot も .github/copilot-instructions.md
ファイルを検出します。VS Code と Visual Studio の両方で使用するワークスペースがある場合、同じファイルを使用して両方のエディターのカスタム指示を定義できます。
.instructions.md
ファイルを使用する
また、1つ以上の .instructions.md
ファイルを作成して、特定のタスクのカスタム指示を保存することもできます。例えば、異なるプログラミング言語、フレームワーク、またはプロジェクトタイプごとに指示ファイルを作成できます。
VS Code は、すべてのチャットリクエストに指示ファイルを自動的に追加するか、どのファイルに指示を自動的に適用するかを指定できます。あるいは、チャットプロンプトに手動で指示ファイルを添付することもできます。
VS Code は、指示ファイルに対して 2 種類のスコープをサポートしています
- ワークスペース指示ファイル: ワークスペース内でのみ利用可能で、ワークスペースの
.github/instructions
フォルダに保存されます。 - ユーザー指示ファイル: 複数のワークスペースで利用可能で、現在の VS Code プロファイルに保存されます。
指示ファイルの構造
指示ファイルは、.instructions.md
というファイル接尾辞を持つ Markdown ファイルです。指示ファイルは 2 つのセクションで構成されます
-
(オプション) メタデータ付きヘッダー (Front Matter 構文)
-
description
: 指示ファイルの簡単な説明。この説明は、チャットビューで指示ファイルにカーソルを合わせたときに表示されます。 -
applyTo
: 指示が自動的に適用されるファイルの glob パターンを指定します。常にカスタム指示を含めるには、**
パターンを使用します。たとえば、次の指示ファイルは常に適用されます
--- applyTo: "**" --- Add a comment at the end of the file: 'Contains AI-generated edits.'
-
-
指示コンテンツを含む本文
Markdown 形式を使用して自然言語でカスタム指示を指定します。見出し、リスト、コードブロックを使用して指示を構造化できます。
Markdown リンクを使用して他の指示ファイルを参照できます。これらのファイルを参照するには相対パスを使用し、パスが指示ファイルの場所に基づいて正しいことを確認してください。
指示ファイルを作成する
ワークスペースまたはユーザープロファイルに指示ファイルを作成できます。ワークスペース指示ファイルはワークスペース内でのみ利用可能ですが、ユーザー指示ファイルは複数のワークスペースで利用可能です。
指示ファイルを作成するには
-
チャットビューのチャットの構成ボタンを選択し、指示を選択してから、新しい指示ファイルを選択します。
または、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からチャット: 新しい指示ファイルコマンドを使用します。
-
指示ファイルを作成する場所を選択します。
-
ワークスペース: デフォルトでは、ワークスペース指示ファイルはワークスペースの
.github/instructions
フォルダに保存されます。chat.instructionsFilesLocations 設定でワークスペースの指示フォルダを追加できます。 -
ユーザープロファイル: ユーザー指示ファイルは現在のプロファイルフォルダに保存されます。設定の同期を使用して、複数のデバイス間でユーザー指示ファイルを同期できます。
-
-
指示ファイルの名前を入力します。
-
Markdown 形式を使用してカスタム指示を作成します。
ヘッダーの
applyTo
メタデータプロパティを指定して、指示が自動的に適用されるタイミングを設定します。たとえば、applyTo: "**/*.ts,**/*.tsx"
を指定して、TypeScript ファイルにのみ指示を適用できます。追加のワークスペースファイルを参照するには、Markdown リンク (
[index](../index.ts)
) を使用するか、指示ファイル内で #-参照 (#index.ts
) します。
既存の指示ファイルを変更するには、チャットビューのチャットの構成ボタンを選択し、指示を選択してから、リストから指示ファイルを選択します。または、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からチャット: 指示の構成コマンドを使用して、クイックピックから指示ファイルを選択します。
チャットで指示ファイルを使用する
指示ファイルに applyTo
メタデータプロパティを指定した場合、VS Code は glob パターンに一致するすべてのファイルに自動的に指示を適用します。
チャットプロンプトに手動で指示ファイルを添付するには
-
チャットビューで、コンテキストの追加 > 指示を選択し、クイックピックから指示ファイルを選択します。
-
コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からチャット: 指示の添付コマンドを実行し、クイックピックから指示ファイルを選択します。
設定でカスタム指示を指定する
ユーザーまたはワークスペースの設定で、特殊なシナリオのためのカスタム指示を構成できます。
指示の種類 | 設定名 |
---|---|
コードレビュー | github.copilot.chat.reviewSelection.instructions |
コミットメッセージの生成 | github.copilot.chat.commitMessageGeneration.instructions |
プルリクエストのタイトルと説明の生成 | github.copilot.chat.pullRequestDescriptionGeneration.instructions |
コード生成 (非推奨)* | github.copilot.chat.codeGeneration.instructions |
テスト生成 (非推奨)* | github.copilot.chat.testGeneration.instructions |
* codeGeneration
と testGeneration
設定は VS Code 1.102 で非推奨になりました。代わりに指示ファイル (.github/copilot-instructions.md
または *.instructions.md
) を使用することをお勧めします。
カスタム指示は、設定値 (text
プロパティ) にテキストとして定義するか、ワークスペース内の外部ファイル (file
プロパティ) を参照することができます。
以下のコードスニペットは、settings.json
ファイルで一連の指示を定義する方法を示しています。
"github.copilot.chat.pullRequestDescriptionGeneration.instructions": [
{ "text": "Always include a list of key changes." },
"github.copilot.chat.reviewSelection.instructions": [
{ "file": "guidance/backend-review-guidelines.md" },
{ "file": "guidance/frontend-review-guidelines.md" }
]
ワークスペース用の指示ファイルを生成する
VS Code はワークスペースを分析し、コーディングの慣習やプロジェクト要件に一致するカスタム指示を含む .github/copilot-instructions.md
ファイルを生成できます。
ワークスペース用の指示ファイルを生成するには
-
チャットビューのチャットの構成ボタンを選択し、指示を選択します
-
クイックピックから指示の生成を選択します。
-
生成された指示ファイルを確認し、必要な編集を行います。
カスタム指示を定義するためのヒント
-
指示は短く、自己完結型に保ちます。各指示は単一の単純な文であるべきです。複数の情報を提供する必要がある場合は、複数の指示を使用してください。
-
指示の中で特定のコーディング標準などの外部リソースを参照しないでください。
-
指示を複数のファイルに分割します。このアプローチは、指示をトピックやタスクの種類別に整理するのに役立ちます。
-
指示を指示ファイルに保存することで、チームやプロジェクト間でカスタム指示を簡単に共有できます。また、ファイルをバージョン管理して、時間経過による変更を追跡することもできます。
-
指示ファイルヘッダーの
applyTo
プロパティを使用して、特定のファイルやフォルダに指示を自動的に適用します。 -
プロンプトファイルからカスタム指示を参照することで、プロンプトをクリーンで焦点を絞ったものに保ち、異なるタスクで指示を重複させるのを避けます。
プロンプトファイル (実験的)
プロンプトファイルは、コードの生成やコードレビューの実行など、一般的なタスクのための再利用可能なプロンプトです。プロンプトの内容は Markdown ファイルで定義します。プロンプトファイルは、チャットで直接実行できるスタンドアロンのプロンプトです。オプションで、タスクの実行方法に関するガイドラインを含めることもできます。
プロンプトファイルは、指示ファイルを利用して共通のガイドラインを再利用し、タスク固有の指示をプロンプトに含めることができます。たとえば、セキュリティレビューのプロンプトファイルは、一般的なセキュリティ慣行を記述したカスタム指示を参照しながら、レビューの発見事項を報告する方法に関する具体的な指示も含めることができます。
VS Code はプロンプトファイルに対して 2 種類のスコープをサポートしています
- ワークスペース プロンプトファイル: ワークスペース内でのみ利用可能で、ワークスペースの
.github/prompts
フォルダに保存されます。 - ユーザー プロンプトファイル: 複数のワークスペースで利用可能で、現在の VS Code プロファイルに保存されます。
プロンプトファイルの例
以下の例は、プロンプトファイルの使用方法を示しています
例: React フォームコンポーネントを生成する
---
mode: 'agent'
model: GPT-4o
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.
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
例: REST API のセキュリティレビューを実行する
---
mode: 'ask'
model: Claude Sonnet 4
description: 'Perform a REST API security review'
---
Perform a REST API security review and provide a TODO list of security issues to address.
* Ensure all endpoints are protected by authentication and authorization
* Validate all user inputs and sanitize data
* Implement rate limiting and throttling
* Implement logging and monitoring for security events
Return the TODO list in a Markdown format, grouped by priority and issue type.
プロンプトファイルの構造
プロンプトファイルは、.prompt.md
というファイル接尾辞を持つ Markdown ファイルです。以下の 2 つの主要なセクションがあります
-
(オプション) メタデータ付きヘッダー (Front Matter 構文)
mode
: プロンプト実行時に使用するチャットモード:ask
,edit
, またはagent
(デフォルト)。model
: プロンプト実行時に使用する AI モデル。指定されていない場合、モデルピッカーで現在選択されているモデルが使用されます。tools
: エージェントモードで使用できるツール (セット) を示すツール (セット) 名の配列。ツールの構成を選択して、ワークスペースで利用可能なツールのリストからツールを選択します。プロンプト実行時に指定されたツール (セット) が利用できない場合は無視されます。description
: プロンプトの簡単な説明。
-
プロンプトコンテンツを含む本文
プロンプトファイルは、チャットでプロンプトを書く形式を模倣しています。これにより、自然言語の指示、追加のコンテキストを混ぜ合わせ、さらには他のプロンプトファイルを依存関係としてリンクすることができます。見出し、リスト、コードブロックを含む Markdown フォーマットを使用して、プロンプトのコンテンツを構造化できます。
Markdown リンクを使用して、他のワークスペースファイル、プロンプトファイル、または指示ファイルを参照できます。これらのファイルを参照するには相対パスを使用し、パスがプロンプトファイルの場所に基づいて正しいことを確認してください。
プロンプトファイル内で、${variableName}
構文を使用して変数を参照できます。以下の変数を参照できます
- ワークスペース変数 -
${workspaceFolder}
,${workspaceFolderBasename}
- 選択変数 -
${selection}
,${selectedText}
- ファイルコンテキスト変数 -
${file}
,${fileBasename}
,${fileDirname}
,${fileBasenameNoExtension}
- 入力変数 -
${input:variableName}
,${input:variableName:placeholder}
(チャット入力フィールドからプロンプトに値を渡す)
プロンプトファイルを作成する
ワークスペースまたはユーザープロファイルにプロンプトファイルを作成できます。ワークスペースプロンプトファイルはワークスペース内でのみ利用可能ですが、ユーザープロンプトファイルは複数のワークスペースで利用可能です。
プロンプトファイルを作成するには
-
チャットビューのチャットの構成ボタンを選択し、プロンプトファイルを選択してから、新しいプロンプトファイルを選択します。
または、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からチャット: 新しいプロンプトファイルコマンドを使用します。
-
プロンプトファイルを作成する場所を選択します。
-
ワークスペース: デフォルトでは、ワークスペースのプロンプトファイルはワークスペースの
.github/prompts
フォルダに保存されます。chat.promptFilesLocations 設定でワークスペースのプロンプトフォルダを追加できます。 -
ユーザープロファイル: ユーザープロンプトファイルは現在のプロファイルフォルダに保存されます。設定の同期を使用して、複数のデバイス間でユーザープロンプトファイルを同期できます。
-
-
プロンプトファイルの名前を入力します。
または、ワークスペースのプロンプトフォルダに直接
.prompt.md
ファイルを作成することもできます。 -
Markdown 形式を使用してチャットプロンプトを作成します。
プロンプトファイル内で、追加のワークスペースファイルを Markdown リンク (
[index](../index.ts)
) として、またはプロンプトファイル内で#index.ts
参照として参照します。他の
.prompt.md
ファイルを参照して、プロンプトの階層を作成することもできます。同様に指示ファイルを参照することもできます。
既存のプロンプトファイルを変更するには、チャットビューのチャットの構成ボタンを選択し、プロンプトファイルを選択してから、リストからプロンプトファイルを選択します。または、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からチャット: プロンプトファイルの構成コマンドを使用し、クイックピックからプロンプトファイルを選択します。
チャットでプロンプトファイルを使用する
プロンプトファイルを実行するには複数のオプションがあります
-
コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からチャット: プロンプトの実行コマンドを実行し、クイックピックからプロンプトファイルを選択します。
-
チャットビューで、チャット入力フィールドに
/
の後にプロンプトファイル名を入力します。このオプションを使用すると、チャット入力フィールドに追加情報を渡すことができます。例:
/create-react-form
または/create-react-form: formName=MyForm
。 -
エディターでプロンプトファイルを開き、エディターのタイトルエリアにある再生ボタンを押します。現在のチャットセッションでプロンプトを実行するか、新しいチャットセッションを開くかを選択できます。
このオプションは、プロンプトファイルを迅速にテストし、反復するのに役立ちます。
デバイス間でユーザープロンプトファイルを同期する
VS Code は、設定の同期を使用して、複数のデバイス間でユーザープロンプトファイルを同期できます。
ユーザープロンプトファイルを同期するには、プロンプトと指示ファイルの設定の同期を有効にします
-
設定の同期が有効になっていることを確認してください。
-
コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から設定の同期: 構成を実行します。
-
同期する設定のリストからプロンプトと指示を選択します。
VS Code で指示とプロンプトファイルを一元管理する
chat.promptFiles 設定で、VS Code での指示とプロンプトファイルの有効/無効を切り替えます。
デバイス管理を使用して組織内でこの設定を一元的に有効または無効にするには、エンタープライズドキュメントのVS Code 設定の一元管理を確認してください。
設定
カスタム指示の設定
-
chat.promptFiles (実験的): 再利用可能なプロンプトと指示ファイルを有効にします。
-
github.copilot.chat.codeGeneration.useInstructionFiles:
.github/copilot-instructions.md
からのコード指示を Copilot リクエストに追加するかどうかを制御します。 -
chat.instructionsFilesLocations (実験的): 指示ファイルが置かれているフォルダの辞書と、それらが有効かどうかを示すブール値。相対パスはワークスペースのルートフォルダから解決されます。ファイルパスの glob パターンをサポートします。デフォルトでは、指示ファイルはワークスペースの
.github/instructions
フォルダにあります。"chat.instructionsFilesLocations": { "src/frontend/instructions": true, "src/backend/instructions": false }
-
github.copilot.chat.codeGeneration.instructions (実験的): コードを生成する Copilot リクエストに追加される指示のセット。
-
github.copilot.chat.testGeneration.instructions (実験的): テストを生成する Copilot リクエストに追加される指示のセット。
-
github.copilot.chat.reviewSelection.instructions (プレビュー): 現在のエディター選択範囲をレビューするための Copilot リクエストに追加される指示のセット。
-
github.copilot.chat.commitMessageGeneration.instructions (実験的): コミットメッセージを生成する Copilot リクエストに追加される指示のセット。
-
github.copilot.chat.pullRequestDescriptionGeneration.instructions (実験的): プルリクエストのタイトルと説明を生成する Copilot リクエストに追加される指示のセット。
プロンプトファイルの設定
-
chat.promptFiles (実験的): 再利用可能なプロンプトファイルと指示ファイルのサポートを有効にします。
-
chat.promptFilesLocations (実験的): プロンプトファイルが置かれているフォルダの辞書と、それらが有効かどうかを示すブール値。相対パスはワークスペースのルートフォルダから解決されます。ファイルパスの glob パターンをサポートします。デフォルトでは、プロンプトファイルはワークスペースの
.github/prompts
フォルダにあります。"chat.promptFilesLocations": { ".github/prompts": false, "setup/**/prompts": true }