第 10 課：進階提示模式 — 斜線指令、參與者與變數

使用 GitHub Copilot 進行 Vibe 編碼：從基礎知識到高級

第 3 部分：快速程式碼工程

亞洲開發網

1. 斜杠命令

斜杠命令是 捷徑 用於常見任務。類型 / 在聊天中查看清單：

命令	功能	例如
/初始化	為專案建立自訂說明	/初始化 （分析程式碼庫並建立 copilot-instructions.md）
/修復	修復當前程式碼或錯誤	/修復類型錯誤：無法讀取未定義的屬性“id”
/測試	為程式碼產生單元測試	UserService 類別的 /tests
/文件	產生文件	/doc 用於此文件中的所有匯出函數
/解釋	程式碼解釋	/解釋#選擇
/清除	清除聊天記錄	/清除

1.1. /init — 為項目設定 AI

最重要的 Slash 指令！運行 /初始化 開始在專案中使用 Copilot 時：

// 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 — 快速修復

// 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 — 自動產生測試

// 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. 聊天參與者

聊天參與者（從 @）是特定領域的「專家」：

參加者	專業知識	何時使用
@工作空間	了解整個程式碼庫	詢問專案結構，尋找相關程式碼
@終端	終端命令	命令解釋，修復終端錯誤
@vscode	VS 程式碼功能	詢問設定、快捷方式、擴展

2.1. @workspace — 程式庫專家

@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 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 專家

@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. 組合模式－真正的力量

結合斜線命令、參與者和上下文變數以獲得強大的提示：

模式 1：修復 + 上下文

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

模式 2：測試 + 檔案參考

/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

模式3：工作區搜尋+實施

@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. 建立個人提示庫

建立常用提示範本集合：

4.1.在專案中儲存提示文件

建立資料夾 .github/提示/ 有文件 .提示.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.使用提示文件

在聊天中，參考提示檔：

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

5. 先進技術

5.1.負面提示

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.輸出規格

Generate a database migration for adding an "orders" table.
Output format:

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

5.3.比較分析

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.

六、總結

工具	前綴	最適合
斜線指令	/	快速操作：修復、測試、文件、初始化
聊天參與者	@	領域專業：工作區、終端、vscode
情境變數	#	附加特定上下文：文件、選擇、程式碼庫
提示文件	.提示.md	用於重複任務的可重複使用的模板

將這一切結合起來，你就擁有了一個 提示工具包 完成有效的 Vibe 編碼。從第 4 部分開始，我們將自訂和擴充 Copilot 的功能： 自訂指令、自訂代理程式和 MCP 伺服器。