VS Code 中 Copilot 的技巧和竅門

本文提供了一些技巧和竅門，以最佳化您在 Visual Studio Code 中使用 GitHub Copilot 的開發體驗。

VS Code 中使用 Copilot 的檢查清單

使用以下檢查清單來充分利用 Copilot

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

2. 個性化 Copilot。使用自定義說明，以獲得符合您風格和編碼實踐的程式碼建議。

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

4. 索引您的工作區。獲得有關您程式碼庫問題的準確響應。

5. 選擇您的人工智慧模型。在模型之間進行選擇，以實現快速編碼或規劃/推理。

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. 可選地，在 applyTo 元資料欄位中新增 glob 模式，以指定說明適用的檔案。

   ---
   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 文件中查詢可與聊天配合使用的實用提示示例。

提供正確的上下文和工具

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

• 在聊天中，選擇工具按鈕來配置您想要使用的工具，或在提示中明確新增它們。
• 使用 #codebase 讓 Copilot 透過執行程式碼搜尋來自動查詢正確的檔案。
• 使用 #fetch 工具從網頁獲取內容，或使用 #githubRepo 對 GitHub 儲存庫執行程式碼搜尋。
• 透過使用 #<file name>、#<folder name> 或 #<symbol> 來在提示中引用檔案、資料夾或符號。
• 將檔案、資料夾或編輯器標籤拖放到聊天提示中。
• 將問題、測試失敗或終端輸出新增到聊天提示中，以提供特定場景的上下文。
• 將影像或螢幕截圖新增到提示中，以便 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. 可選地，新增有關如何在聊天中執行提示的元資料。使用 agent 欄位指定代理，使用 tools 欄位指定要使用的代理模式工具。

   ---
   agent: 'agent'
   tools: ['githubRepo', 'search/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 的提示檔案。

開始使用提示檔案。

選擇您的人工智慧模型

Copilot 提供不同的人工智慧模型供您選擇。一些模型針對快速編碼任務進行了最佳化，而另一些模型更適合較慢的規劃和推理任務。

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

在 GitHub Copilot 文件中，詳細瞭解 Copilot Chat 的 AI 模型。

工作區索引

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

對於 GitHub 儲存庫，您可以使用基於 GitHub 程式碼搜尋的工作區遠端索引。這使 Copilot 能夠非常快速地搜尋您的整個程式碼庫，即使程式碼庫非常大。

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

相關資源

• 提示工程指南
• GitHub Copilot 文件中的使用 GitHub Copilot 的最佳實踐
• 自定義 VS Code 中的聊天