Chuyển đến nội dung chính

Lesson 10: Advanced Prompt Patterns — Slash Commands, Participants & Variables

Slash commands (/init, /fix, /tests, /doc, /explain). Chat participants (@workspace, @terminal, @vscode). Context variables (#file, #selection, #codebase). Combining patterns. Prompt templates for common use cases. Personal prompt library.

💻 Programming — Lesson 10 Lesson 10: Advanced Prompt Patterns — Slash Commands, Participants & Variables

Vibe Coding with GitHub Copilot: From Basics to Advanced

Part 3: Prompt Engineering for Code

xdev.asia

1. Slash Commands

Slash commands are shortcuts for common tasks. Type / in chat to see the list:

Command Function For example
/init Create custom instructions for the project /init (analyze codebase and create copilot-instructions.md)
/fix Fix current code or error /fix TypeError: Cannot read property 'id' of undefined
/tests Generate unit tests for code /tests for the UserService class
/doc Generate documentation /doc for all exported functions in this file
/explain Code explanation /explain #selection
/clear Clear chat history /clear

1.1. /init — Setup AI for project

The most important Slash command! Run /init When starting to use Copilot for a project:

// Trong Chat view, gõ:
/init

// Copilot phân tích codebase và tạo:
// .github/copilot-instructions.md với:
// - Project structure description
// - Tech stack
// - Coding conventions phát hiện từ codebase
// - Testing patterns
// - Naming conventions

1.2. /fix — Quick fix

// Copy error từ terminal hoặc Problems panel:
/fix npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from [email protected]

1.3. /tests — Generate tests automatically

// Mở file cần test, rồi:
/tests for all public methods, include edge cases and error scenarios.
Use Jest with describe/it blocks.

2. Chat Participants

Chat participants (starting with @) are "experts" for specific domains:

Participant Expertise When to use
@workspace Understand the entire codebase Ask about project structure, find related code
@terminal Terminal commands Command explanation, fix terminal errors
@vscode VS Code features Ask about settings, shortcuts, extensions

2.1. @workspace — Codebase expert

@workspace Where is the database connection configured in this project?

@workspace How is error handling done across API routes? Show me the pattern.

@workspace What testing framework and patterns are used? Show examples.

2.2. @terminal — Terminal helper

@terminal How to find all processes using port 3000 and kill them?

@terminal Explain this command: find . -name "*.ts" -exec grep -l "TODO" {} ;

@terminal The last command failed with permission denied. How to fix?

2.3. @vscode — IDE expert

@vscode How to configure auto-format on save for TypeScript files?

@vscode What's the shortcut to split editor vertically?

@vscode How to create a launch.json for debugging Node.js?

3. Combining Patterns — Real power

Combine slash commands, participants, and context variables for powerful prompts:

Pattern 1: Fix + Context

/fix #terminalLastCommand
Look at #file:src/services/OrderService.ts and fix the failing test.
The error seems related to the mock setup.

Pattern 2: Tests + File reference

/tests for #file:src/utils/validation.ts
Follow the same pattern as #file:tests/utils/string.test.ts
Include these scenarios: empty input, null, unicode, SQL injection attempts

Pattern 3: Workspace search + Implementation

@workspace Find all API endpoints that don't have rate limiting.
Then add rate limiting middleware to each one, using the same
configuration as #file:src/middleware/rateLimit.ts

4. Build a personal Prompt Library

Create a collection of commonly used prompt templates:

4.1. Save prompt files in project

Create folders .github/prompts/ with files .prompt.md:

<!-- .github/prompts/new-api-endpoint.prompt.md -->
---
description: Create a new REST API endpoint
---
Create a new API endpoint for {{resource_name}}.

Requirements:
- CRUD operations (GET list, GET by id, POST, PUT, DELETE)
- Zod validation for request bodies
- Prisma queries following our repository pattern
- Error handling with our AppError class
- Authentication middleware on all routes
- Pagination for list endpoint (cursor-based)

Follow patterns in:
- Route: src/routes/userRoutes.ts
- Service: src/services/UserService.ts
- Schema: src/schemas/userSchema.ts

4.2. Use prompt files

In Chat, reference prompt file:

#file:.github/prompts/new-api-endpoint.prompt.md
resource_name = "products"

5. Advanced Techniques

5.1. Negative prompting

Create a user registration form.
DO NOT:
- Use any CSS framework (no Tailwind, no Bootstrap)
- Add client-side validation (we handle it server-side)
- Include social login buttons
- Use any external dependencies

5.2. Output specification

Generate a database migration for adding an "orders" table.

Output format:

  1. Prisma schema addition (for schema.prisma)
  2. SQL migration file (for manual review)
  3. Seed data TypeScript file (5 sample records)

5.3. Comparative analysis

I need a caching solution for our API responses.
Compare these approaches with code examples for each:
1. In-memory cache (node-cache)
2. Redis cache
3. HTTP cache headers

For each, show: setup code, cache hit/miss handling, cache invalidation strategy. Recommend which to use for our use case: 100 RPS, data changes every 5 minutes.

6. Summary

Tools Prefix Best for
Slash Commands / Quick actions: fix, test, doc, init
Chat Participants @ Domain expertise: workspace, terminal, vscode
Context Variables # Attach specific context: file, selection, codebase
Prompt Files .prompt.md Reusable templates for recurring tasks

Combine it all, you have one prompt toolkit complete for effective Vibe Coding. From Part 4, we will customize and extend Copilot's capabilities with Custom Instructions, Custom Agents, and MCP Servers.