本日はVisualStudioCodeの学習枠です。
VisualStudioCodeのGitHubCopilotのドキュメントを読みながら実際に操作を試してみました。
前回記事
以下の前回記事の続きです。
bluebirdofoz.hatenablog.com
Customize AI responses in VS Code
以下のCustomize AI responses in VS Codeドキュメントを日本語訳しながら実行時のキャプチャをしていきます。
code.visualstudio.com
プロンプトファイル(実験的)
プロンプトファイルはコードの生成やコードレビューなどの一般的なタスクに再利用可能なプロンプトです。
プロンプトの内容はMarkdownファイルで定義します。プロンプトファイルはチャット内で直接実行可能な独立したプロンプトです。
必要に応じてタスクの執行方法に関するガイドラインを記載することもできます。
VS Codeは、プロンプトファイルに対して2種類のスコープをサポートしています:
プロンプトファイルの例
次の例はプロンプトファイルの使用方法を示しています。
例: Reactフォームコンポーネントを生成する
--- mode: 'agent' model: GPT-4o tools: ['githubRepo', 'codebase'] description: '新しいReactフォームコンポーネントを生成する' --- あなたの目標は#githubRepo contoso/react-templatesにあるテンプレートに基づいて新しいReactフォームコンポーネントを生成することです。 フォーム名とフィールドが指定されていない場合は、それらを要求します。 フォームの要件: * フォームデザインシステムコンポーネントを使用する: [design-system/Form.md](../docs/design-system/Form.md) * フォームの状態管理に `react-hook-form` を使用: * フォームデータ用の TypeScript 型を必ず定義する * `register` を使用して *uncontrolled* コンポーネントを優先する * 不必要な再レンダリングを防止するために `defaultValues` を使用する * バリデーションに `yup` を使用する * バリデーションスキーマを別ファイルに再利用可能な形で作成する * TypeScript 型を使用して型安全性を確保する * ユーザーフレンドリーなバリデーションルールをカスタマイズする
例: REST API のセキュリティレビューを実行する
--- mode: 'ask' model: Claude Sonnet 4 description: 'REST APIのセキュリティレビューを実施する' --- REST APIのセキュリティレビューを実施し、対応が必要なセキュリティ問題のTODOリストを提供してください。 * すべてのエンドポイントが認証と認可で保護されていることを確認する * すべてのユーザー入力を検証し、データをサニタイズする * レート制限とスロットリングを実装する * セキュリティイベントのログ記録と監視を実装する TODOリストをMarkdown形式で返却し、優先度と問題の種類ごとにグループ化してください。
プロンプトファイル構造
プロンプトファイルは.prompt.mdファイル拡張子を持つMarkdownファイルです。以下の2つの主要なセクションから構成されます。
・(オプション)メタデータを含むヘッダー
- mode:プロンプトを実行する際のチャットモード: ask、edit、または agent (デフォルト)。
- model:プロンプトを実行する際のAIモデル。指定しない場合、モデルピッカーで現在選択されているモデルが使用されます。
- tools:エージェントモードで使用可能なツール（セット）の名前を指定する配列。ツールを設定するにはワークスペース内の利用可能なツール一覧からツールを選択するために「ツールを設定」を選択します。プロンプトを実行時に指定されたツール（セット）が利用できない場合そのツールは無視されます。
- description:プロンプトの短い説明。
・プロンプトコンテンツを含む本文
他のワークスペースファイル、プロンプトファイルまたはインストラクションファイルをMarkdownリンクを使用して参照できます。
これらのファイルを参照する際は相対パスを使用し、プロンプトファイルの場所に基づいてパスが正しいことを確認してください。
プロンプトファイル内では${variableName}構文を使用して変数を参照できます。以下の変数を参照できます。
- ワークスペース変数：${workspaceFolder}, ${workspaceFolderBasename}
- 選択変数：${selection}, ${selectedText}
- ファイルコンテキスト変数：${file}, ${fileBasename}, ${fileDirname}, ${fileBasenameNoExtension}
- 入力変数：${input:variableName}, ${input:variableName:placeholder} (チャット入力フィールドからプロンプトに値を渡します)
プロンプトファイルを作成する
プロンプトファイルはワークスペースまたはユーザープロファイル内で作成できます。
ワークスペースのプロンプトファイルはワークスペース内でのみ利用可能ですが、ユーザーのプロンプトファイルは複数のワークスペース間で利用可能です。
プロンプトファイルを作成するには以下の手順を実施します。
チャットビューで[Configure Chat ...]を選択し、[Prompt Files]を選択します
命令ファイルを作成する場所を選択します。
Workspace(ワークスペース)
デフォルトではワークスペースの命令ファイルはワークスペースの.github/promptsフォルダーに保存されます。
ワークスペースに追加の命令フォルダーを追加するにはchat.promptFilesLocations設定を使用します。
User profile(ユーザプロファイル)
ユーザーマニュアルファイルは現在のプロファイルフォルダーに保存されています。
設定同期機能を使用することで複数のデバイス間でユーザーマニュアルファイルを同期させることができます。
命令ファイルの名前を入力します。
Markdown形式を使用してカスタム命令の指示を記述します。
プロンプトファイル内では追加のワークスペースファイルをMarkdownリンク（[index](../index.ts)）として参照するかプロンプトファイル内での#index.ts参照として指定できます。
また他の.prompt.mdファイルを参照してプロンプトの階層構造を作成することもできます。同じ方法で命令ファイルを参照することも可能です。
既存のプロンプトファイルを編集するにはチャットビューの[Configure Chat ...]を選択し、[Prompt Files]を選択してリストからプロンプトファイルを選択します。
チャットでプロンプトファイルを使用する
プロンプトファイルを実行するには複数のオプションがあります。
またはコマンドパレット（Ctrl+Shift+P）から[Chat: Run Prompt]コマンドを実行し、クイックピックから指示ファイルを選択します。
チャットビューで、チャット入力フィールドに /(プロンプトファイル名) を入力します。
このオプションを使用するとチャットの入力フィールドに追加情報を渡すことができます。例えば/create-react-form: formName=MyFormなどです。
エディタでプロンプトファイルを開き、エディタタイトル領域の再生ボタンを押します。
現在のチャットセッションでプロンプトを実行するか新しいチャットセッションを開くかを選択できます。
