Prompt Files in VS Code (Copilot Chat)

 

Prompt files are reusable, Markdown-based instructions that can be executed on-demand to perform tasks like generating code, running code reviews, or scaffolding components. They help standardize workflows and ensure consistent AI behavior.

---

🧾 Prompt File Structure (*.prompt.md)

---
mode: 'agent'               # 'ask', 'edit', or 'agent' (default)
model: GPT-4o               # Optional: specify a model
tools: ['codebase']         # Optional: enable tools
description: 'What this prompt does'
---

# Instructions
Use Markdown to describe:
- The task the AI should perform
- Specific guidelines or rules
- Expected format of the response

✅ Supports:

• Markdown formatting

• Variables like ${file}, ${selection}, ${input:formName}

• Links to:

  • Workspace files: [index](../index.ts)

  • Instruction files: [TS Guidelines](../instructions/ts.instructions.md)

  • Other prompts: [Base Prompt](./base.prompt.md)

---

📁 Where to Store Prompt Files

Scope	Path	Notes
Workspace	.github/prompts/	Shared within project repo
User Profile	Stored in your VS Code profile	Available across all workspaces

🔁 Use Settings Sync to sync prompt files across devices.

---

🚀 How to Use a Prompt File

Method	Description
/prompt-name in chat	Run a prompt quickly (e.g., /create-form)
/prompt-name:field=value	Pass input variables (e.g., /create-form:formName=Login)
Command Palette	Run Chat: Run Prompt and pick a file
Editor Play Button	Open .prompt.md file and hit ▶️

---

🔧 Enable & Create Prompt Files

1. Enable setting (optional but recommended):

   "chat.promptFiles": true
   

2. Create a prompt:

   • Open Chat view → Configure Chat > Prompt Files > New prompt file

   • Or use Command Palette: Chat: New Prompt File

3. Choose scope:

   • Workspace (in .github/prompts)

   • User (VS Code profile)

---

🧪 Example Prompt Files

📦 Generate a React Form Component

---
mode: 'agent'
model: GPT-4o
tools: ['githubRepo', 'codebase']
description: 'Generate a new React form component'
---

Your goal is to generate a new React form using [Form Design System](../docs/design-system/Form.md).

Requirements:
- Use `react-hook-form`
- TypeScript types for form data
- Use `yup` for validation
- Use `defaultValues`

🔐 REST API Security Review

---
mode: 'ask'
model: Claude Sonnet 4
description: 'Perform a REST API security review'
---

Perform a REST API security review. Output a TODO list of issues grouped by priority.

Checklist:
- Auth protection for endpoints
- Input validation and sanitization
- Rate limiting
- Security logging

---

🧠 Prompt Variables

Variable	Example	Purpose
${selection}	Selected code in editor	Context-sensitive prompts
${file}, ${fileBasename}	Current file info	File-specific generation
${input:formName}	User input (e.g., LoginForm)	Interactive prompts
${workspaceFolder}	Full path to workspace	Dynamic referencing

---

💡 Tips for Writing Effective Prompt Files

• Be specific about the task and expected output format

• Reference instruction files instead of repeating content

• Use variables for flexibility

• Test and iterate using the editor play button

• Keep descriptions short and clear

• Use Markdown lists and formatting to structure tasks

• Organize prompts by domain (e.g., react-form.prompt.md, api-review.prompt.md)

---

🔗 Related Features

• ✅ Custom Instructions — Default behavior and guidelines

• 🎯 Custom Chat Modes — Different personas or interaction styles

• 🔌 Configure Tools — Add tool access (e.g., repo scanner)