VS Code 中 Copilot 的提示和技巧

本文提供了在 Visual Studio Code 中使用 GitHub Copilot 以最佳化開發體驗的提示和技巧。

在 VS Code 中使用 Copilot 的核對清單

使用以下核對清單來充分利用 Copilot

1. 選擇合適的工具。使用為編輯、提問或保持編碼流程而最佳化的工具。

2. 個性化 Copilot。使用自定義指令來獲取符合您風格和編碼實踐的程式碼建議。

3. 編寫有效的提示並提供上下文。獲取最相關的響應。

4. 為您的工作區建立索引。獲得關於您程式碼庫問題的準確回答。

5. 選擇您的 AI 模型。在用於快速編碼或規劃/推理的模型之間進行選擇。

6. 重用提示。透過在團隊中儲存和重用特定於任務的提示來節省時間。

選擇合適的 Copilot 工具

根據您的任務，您可以在不同的 Copilot 工具之間進行選擇。

使用指令檔案個性化 Copilot

當 Copilot 生成程式碼或回答問題時，它會嘗試匹配您的編碼實踐和偏好，例如您使用哪個庫或如何命名變數。但是，它可能並不總是有足夠的上下文來有效地做到這一點。例如，如果您使用特定的框架版本，您需要在提示中提供額外的上下文。

為了增強 AI 的響應，您可以使用指令檔案來提供有關團隊編碼實踐、工具或專案細節的上下文資訊。然後，您可以將這些指令附加到您的聊天提示中，或讓它們自動應用。

為您的工作區啟用指令檔案

1. 從命令面板執行 Chat: New Instructions File 命令。

   此命令會在 .github/instructions 資料夾中建立一個 .instructions.md 檔案。

2. 將您的指令以 Markdown 格式新增到檔案中。例如：

   # Custom instructions for Copilot
   
   ## Project context
   This project is a web application built with React and Node.js.
   
   ## Indentation
   We use tabs, not spaces.
   
   ## Coding style
   Use camelCase for variable names and prefer arrow functions over traditional function expressions.
   
   ## Testing
   We use Jest for unit testing and Playwright for end-to-end testing.
   

3. 可選地，將一個 glob 模式新增到 applyTo 元資料欄位，以指定指令適用於哪些檔案。

   ---
   applyTo: "**/*.ts"
   ---
   Coding practices for TypeScript files.
   ...
   

獲取更多關於在 VS Code 中使用指令檔案的詳細資訊。

提示工程

您可以透過使用有效的提示來提高 Copilot 響應的質量。一個精心設計的提示可以幫助 Copilot 更好地理解您的需求，並生成更相關的程式碼建議。

• 先從寬泛開始，然後具體化。

  Generate a Calculator class.
  Add methods for addition, subtraction, multiplication, division, and factorial.
  Don't use any external libraries and don't use recursion.
  

• 給出您想要的示例。

  Generate a function that takes a string and returns the number of vowels in it.
  Example:
  findVowels("hello") returns 2
  findVowels("sky") returns 0
  

• 將複雜任務分解為更簡單的任務。

  不要讓 Copilot 生成一個膳食計劃應用，而是將其分解為更小的任務：

  • 生成一個函式，接收一個食材列表並返回一個食譜列表。
  • 生成一個函式，接收一個食譜列表並返回一個購物清單。
  • 生成一個函式，接收一個食譜列表並返回一週的膳食計劃。

• 提供正確的上下文，例如程式碼選擇、檔案、終端輸出等。

  例如，使用 #codebase 變數來指代整個程式碼庫：

  Where is the database connection string used in #codebase?
  

• 迭代您的提示。

  提供後續提示來完善或修改響應。例如：

  • “編寫一個函式來計算一個數的階乘。”
  • “不要使用遞迴，並使用快取進行最佳化。”
  • “使用有意義的變數名。”

• 保持聊天曆史的相關性。

  Copilot 使用對話歷史來提供上下文。如果過去的問題和回答不相關，請從歷史中移除它們。或者，如果您想改變上下文，請開始一個新的會話。

獲取更多關於提示工程的詳細資訊。

在 GitHub Copilot 文件中查詢與 Copilot 一起使用的提示的實用示例。

提供正確的上下文和工具

用相關的上下文豐富您的提示，以在聊天中獲得更準確和相關的響應。藉助合適的工具，您可以提高開發人員的生產力。

• 在代理模式下，選擇工具按鈕來配置您想使用的工具，或將它們明確新增到您的提示中。
• 使用 #codebase 讓 Copilot 透過執行程式碼搜尋來自動找到正確的檔案。
• 使用 #fetch 工具從網頁獲取內容，或使用 #githubRepo 在 GitHub 倉庫上執行程式碼搜尋。
• 透過使用 #、# 或 # 在您的提示中引用檔案、資料夾或符號。
• 將檔案、資料夾或編輯器選項卡拖放到聊天提示中。
• 將問題、測試失敗或終端輸出新增到您的聊天提示中，以獲取特定場景的上下文。
• 將影像或螢幕截圖新增到您的提示中，讓 Copilot 分析影像。
• 在代理模式下，提示預覽您的應用程式，以直接使用內建的簡單瀏覽器開啟它。

當您使用代理模式時，Copilot 會自主為您找到相關的檔案和上下文。

獲取更多關於向聊天提示新增上下文的詳細資訊。

可重用提示

提示檔案使您能夠將特定任務的提示及其上下文和指令儲存在一個 Markdown 檔案中。然後，您可以在聊天中附加並重用該提示。如果將提示儲存在工作區中，您還可以與團隊共享。

建立可重用提示

1. 在命令面板中使用 Chat: New Prompt File 命令建立一個提示檔案。

   此命令會在您工作區根目錄的 .github/prompts 資料夾中建立一個 .prompt.md 檔案。

2. 以 Markdown 格式描述您的提示和相關上下文。

   例如，使用此提示生成一個新的 React 表單元件。

   Your goal is to generate a new React form component.
   
   Ask for the form name and fields if not provided.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   * Prefer *uncontrolled* components using register
   * Use `defaultValues` to prevent unnecessary rerenders
   * Use `yup` for validation:
   * Create reusable validation schemas in separate files
   * Use TypeScript types to ensure type safety
   * Customize UX-friendly validation rules
   

3. 可選地，新增有關如何在聊天中執行提示的元資料。使用 mode 欄位指定聊天模式，使用 tools 欄位指定要使用的代理模式工具。

   ---
   mode: 'agent'
   tools: ['githubRepo', 'codebase']
   description: 'Generate a new React form component'
   ---
   Your goal is to generate a new React form component based on the templates in #githubRepo contoso/react-templates.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   

4. 透過在聊天輸入欄位中鍵入 /，後跟提示檔名來執行命令。

   例如，鍵入 /new-react-form 來執行名為 new-react-form.prompt.md 的提示檔案。

開始使用提示檔案。

選擇您的 AI 模型

Copilot 提供不同的 AI 模型供選擇。一些模型為快速編碼任務進行了最佳化，而另一些則更適合較慢的規劃和推理任務。

透過使用聊天輸入欄位中的模型選擇器，選擇最適合您需求的模型。

在 GitHub Copilot 文件中瞭解更多關於Copilot Chat 的 AI 模型的資訊。

工作區索引

Copilot 使用索引來快速準確地搜尋您的程式碼庫以查詢相關的程式碼片段。此索引可以由 GitHub 維護，也可以本地儲存在您的機器上。

對於 GitHub 倉庫，您可以使用基於 GitHub 程式碼搜尋的工作區遠端索引。這使得 Copilot 即使在程式碼庫非常大的情況下也能非常快速地搜尋整個程式碼庫。

獲取更多關於工作區索引的詳細資訊。

相關資源

• Copilot Chat 的提示工程
• GitHub Copilot 文件中的使用 GitHub Copilot 的最佳實踐
• 在 VS Code 中個性化 Copilot