https://bluebirdofoz.hatenablog.com/entry/2025/08/04/233235

本日はVisualStudioCodeの学習枠です。
VisualStudioCodeのGitHubCopilotのドキュメントを読みながら実際に操作を試してみました。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

Customize AI responses in VS Code

以下のCustomize AI responses in VS Codeドキュメントを日本語訳しながら実行時のキャプチャをしていきます。
code.visualstudio.com

VS CodeでのAI応答のカスタマイズ

Visual Studio Codeのチャットでは適切なコンテキストを与えればコーディングプラクティスとプロジェクト要件に一致する応答を提供します。
全てのチャットプロンプトにコンテキストを繰り返し追加する代わりに、このコンテキストをファイルに保存して全てのチャットリクエストに自動的に含めることができます。

この記事ではカスタム命令とプロンプトファイルを使用して、VS CodeでAI応答をカスタマイズする方法について説明します。
Visual Studio CodeでAI応答をカスタマイズするには、主に3つの方法があります。

カスタム命令

コードの生成、コードレビューの実行、コミットメッセージの生成などのタスクに関する一般的なガイドラインまたはルールを定義します。
カスタム命令はAIが実行する必要がある条件 (タスクの実行方法) を記述します。

シナリオ例

コーディングの方法、優先テクノロジー、またはプロジェクトの要件を指定して、生成されたコードが標準に従うようにします。
セキュリティの脆弱性やパフォーマンスの問題のチェックなど、コードレビューのルールを設定します。
コミットメッセージまたはプルリクエストのタイトルと説明を生成する手順を提供します。

プロンプトファイル

コードの生成やコードレビューの実行などの一般的なタスクに対して再利用可能なプロンプトを定義します。
プロンプトファイルはチャットで直接実行できるスタンドアロンのプロンプトです。実行するタスク(何をすべきか)を記述します。
オプションでタスクの実行方法に関するタスク固有のガイドラインを含めるか、プロンプトファイルでカスタム手順を参照できます。

シナリオ例

新しいコンポーネントのスキャフォールディング、APIルート、テストの生成など、一般的なコーディングタスクの再利用可能なプロンプトを作成します。
コード品質、セキュリティの脆弱性、パフォーマンスの問題のチェックなど、コードレビューを実行するためのプロンプトを定義します。
複雑なプロセスやプロジェクト固有のパターンのステップバイステップのガイドを作成します。
実装計画、アーキテクチャ設計、または移行戦略を生成するためのプロンプトを定義します。

カスタムチャットモード

チャットの動作方法、使用できるツール、コードベースとの対話方法を定義します。
各チャットプロンプトはチャットモードの境界内で実行され、全てのリクエストに対してツールや手順を構成する必要はありません。

シナリオ例

AIがコードベースへの読み取り専用アクセスを持ち、実装計画のみを生成できる計画用のチャットモードを作成します。
AIが外部リソースにアクセスして新しいテクノロジーを探索したり、情報を収集したりできるリサーチチャットモードを定義します。
AIがフロントエンド開発に関連するコードのみを生成および変更できるフロントエンド開発者チャットモードを作成します。

カスタム命令

カスタム命令を使用すると、一般的なガイドラインやルールを記述して特定のコーディング手法や技術スタックに一致する回答を得ることができます。
カスタム命令は全てのチャットリクエストにこの情報を自動的に組み込みます。ただしカスタム命令はコード補完には考慮されません。

カスタム命令の種類

VS Codeではカスタム命令を定義する複数の方法がサポートされています。
以下のアプローチを組み合わせて使用してカスタム命令を定義でき、その指示は全てチャット要求に含まれます。
命令には特定の順序や優先順位が適用されないため、ファイル内の命令が競合しないようにする必要があります。

.github/copilot-instructions.mdファイル

Markdownでコード生成手順について説明します。
全ての指示はワークスペース内に格納された1つのファイルにまとめられます。
手順は全てのチャットリクエストに自動的に含まれます。
Copilotをサポートする全てのエディターとIDEでサポートされています。
このファイルを使用して全てのコード生成タスクに適用される一般的なコーディング方法、優先テクノロジーおよびプロジェクト要件を定義します。

.instructions.mdファイル

Markdownでのコード生成手順について説明します。
ワークスペースまたはユーザープロファイルに格納されている1つ以上の指示ファイルを作成します。
globパターンを使用して全ての要求または特定のファイルに対する指示を自動的に含めます。
VS Codeでサポートされています。
これらのファイルはタスク固有のコード生成命令を取得し、チャットプロンプトに指示を含めるタイミングをより詳細に制御する場合に使用します。

VS Code設定

VS Codeユーザーまたはワークスペースの設定で手順を指定します。
設定値または1つ以上のファイルで指示を定義します。
VS Codeでサポートされています。
コード生成、テスト生成、コミットメッセージ、コードレビュー、プルリクエストタイトルと説明の手順をサポートします。
このオプションはコード生成以外のタスクの指示を定義するために使用します。

カスタム命令の例

次の例は一般的なコーディングガイドラインを示したカスタム命令の使用方法の一例です。

---
applyTo: "**/*.ts,**/*.tsx"
---
# TypeScriptとReactのプロジェクトコーディング基準

全てのコードに[一般的なコーディングガイドライン](./general-coding.instructions.md)を適用してください。

## TypeScript ガイドライン
- 新規のコードには全て TypeScript を使用する
- 可能な限り関数型プログラミングの原則に従う
- データ構造と型定義にはインターフェースを使用する
- 不変データ（const、readonly）を優先する
- オプションチェーン（?.）とヌル合体（??）演算子を使用する

## React ガイドライン
- フックを使用した機能コンポーネントを使用する
- React フックのルールに従う（条件付きフックは使用しない）
- 子要素を持つコンポーネントには React.FC 型を使用する
- コンポーネントを小さく、焦点を絞ったものにする
- コンポーネントのスタイリングには CSS モジュールを使用する