開始在 VS Code 中使用 GitHub Copilot

GitHub Copilot 改變了您在 Visual Studio Code 中撰寫程式碼的方式。在此實作教學中，您將建置一個完整的任務管理網路應用程式，同時探索 VS Code 的 AI 功能：跨多個檔案實作功能的自主代理人、智慧行內建議、使用行內聊天進行精確編輯、整合式智慧動作，以及強大的自訂選項。

完成此教學課程後，您將擁有一個可運作的網路應用程式以及一個能適應您開發風格的個人化 AI 程式碼設定。

建立範例應用程式

在 VS Code 中使用聊天一次性產生範例應用程式。

先決條件

您的電腦已安裝 VS Code。請從 Visual Studio Code 網站下載。
存取 GitHub Copilot。依照這些步驟來在 VS Code 中設定 GitHub Copilot。

提示
如果您沒有 Copilot 訂閱，可以直接從 VS Code 內部註冊免費使用 Copilot，並享有每月行內建議和聊天互動的限制。

步驟 1：體驗行內建議

AI 驅動的行內建議會在您輸入時出現，幫助您更快、更少錯誤地撰寫程式碼。讓我們開始建置您的任務管理器的基礎。

為您的專案建立一個新資料夾，並在 VS Code 中開啟它。
建立一個名為 index.html 的新檔案。
開始輸入以下內容，當您輸入時，VS Code 會提供行內建議 (ghost text)
```
<!DOCTYPE html>
```
您可能會看到不同的建議，因為大型語言模型是非確定性的。
按下 Tab 鍵以接受建議。

恭喜！您剛剛接受了第一個 AI 驅動的行內建議。
繼續建置您的 HTML 結構。在 <body> 標籤內，開始輸入
```
<div class="container">
    <h1>My Task Manager</h1>
    <form id="task-form">
```
請注意 VS Code 如何在您建置應用程式結構時，持續建議相關的 HTML 元素。
如果您看到多個建議，請將滑鼠懸停在 ghost text 上以查看導覽控制項，或使用 ⌥] (Windows、Linux Alt+]) 和 ⌥[ (Windows、Linux Alt+[) 來循環瀏覽選項。

行內建議會在您輸入時自動運作，從您的模式和專案的內容中學習。它們對於撰寫樣板程式碼、HTML 結構和重複模式特別有用。

步驟 2：使用代理人建置完整功能

AI 代理人是 VS Code 最強大的 AI 功能。給定一個自然語言提示，它們會自主規劃並實作跨多個檔案的複雜功能。讓我們使用它們來建立您的任務管理應用程式的核心功能。

按下 ⌃⌘I (Windows、Linux Ctrl+Alt+I) 或點選 VS Code 標題列中的聊天圖示，以開啟聊天檢視。

聊天檢視是您使用自然語言提示與 AI 互動的地方。您可以進行持續的對話，並疊代地調整您的請求以獲得更好的結果。
在代理人下拉式選單中選取 Agent，讓 AI 獨立地端對端實作您的請求。

重要
如果您沒有看到代理人選項，請確保在您的 VS Code 設定中已啟用代理人 ( chat.agent.enabled Open in VS Code Open in VS Code Insiders 此設定由組織層級管理。請聯絡您的管理員進行變更。)。您的組織可能也已停用代理人 - 請聯絡您的管理員以啟用此功能。
輸入以下提示，然後按下 Enter 鍵。代理人會分析您的請求並開始實作解決方案。
```
Create a complete task manager web application with the ability to add, delete, and mark tasks as completed. Include modern CSS styling and make it responsive. Use semantic HTML and ensure it's accessible. Separate markup, styles, and scripts into their own files.
```
觀察代理人如何產生實作您的請求所需的檔案和程式碼。您應該會看到它更新 index.html 檔案，建立一個用於樣式的 styles.css 檔案，以及一個用於功能的 script.js 檔案。

提示
不同的語言模型可能有不同的優勢。使用聊天檢視中的模型下拉式選單來切換語言模型。
檢閱產生的檔案並選取 Keep (保留) 以接受所有變更。
透過右鍵點選檔案並選取 Show Preview (顯示預覽)，在整合式瀏覽器 VS Code 中開啟您的 index.html 檔案。您可以新增任務、將其標記為已完成，並刪除它們。
現在，讓我們新增一個額外功能。在聊天輸入框中輸入以下提示
```
Add a filter system with buttons to show all tasks, only completed tasks, or only pending tasks. Update the styling to match the existing design.
```
請注意代理人如何協調跨多個檔案的變更以完整實作此功能。

代理人擅長理解高階需求並將其轉換為可運作的程式碼。它們非常適合實作新功能、重構大量程式碼，或從頭開始建置整個應用程式。

步驟 3：使用行內聊天進行精確調整

雖然代理人處理大型功能，但編輯器行內聊天非常適合對檔案中特定程式碼區塊進行目標性改進。讓我們使用它來增強任務管理器應用程式。

開啟您的 JavaScript 檔案並找到新增任務的程式碼。
選取程式碼區塊，然後按下 ⌘I (Windows、Linux Ctrl+I) 以開啟編輯器行內聊天。

注意
確切的程式碼可能會有所不同，因為大型語言模型是非確定性的。
輸入以下提示
```
Add input validation to prevent adding empty tasks and trim whitespace from task text.
```
請注意行內聊天如何專注於選定的程式碼並進行目標性改進。
檢閱變更並選取 Keep (保留) 以套用它們。

編輯器行內聊天非常適合進行小而集中的變更，而不會影響更廣泛的程式碼庫，例如新增錯誤處理、重構個別函式或修復錯誤。

步驟 4：個人化您的 AI 體驗

自訂聊天使其更符合您的特定需求和程式碼風格。您可以設定自訂指示並建立專門的自訂代理人。讓我們為您的專案建立一個完整的個人化設定。

建立自訂指示

自訂指示會告知 AI 您的程式碼偏好和標準。這些會自動套用到所有聊天互動。

在您的專案根目錄中建立一個名為 .github 的新資料夾。
在 .github 資料夾內，建立一個名為 copilot-instructions.md 的檔案。

新增以下內容

# Project general coding guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article, etc.)
- Prefer modern JavaScript (ES6+) features like const/let, arrow functions, and template literals

## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants

## Code Quality
- Use meaningful variable and function names that clearly describe their purpose
- Include helpful comments for complex logic
- Add error handling for user inputs and API calls

儲存檔案。這些指示現在會套用到此專案中的所有聊天互動。
透過要求代理人新增功能來測試自訂指示
```
Add a dark mode toggle button to the task manager.
```
請注意產生的程式碼如何遵循您指定的準則。VS Code 支援更進階的自訂指示，例如套用特定檔案類型的指示。

提示

在聊天中使用 /init 斜線指令，根據您專案的結構和程式碼模式自動產生自訂指示。如果您有現有的程式碼庫並希望為 AI 協助做好準備，這會很有用。

建立用於程式碼審查的自訂代理人

自訂代理人會為特定任務建立專門的 AI 角色。讓我們建立一個「程式碼審查者」代理人，專注於分析並提供程式碼回饋。在自訂代理人定義中，您可以定義 AI 的角色、特定準則以及它可以使用哪些工具。

開啟命令選擇區並執行 Chat: New Custom Agent (聊天：新增自訂代理人) 命令。
選取 .github/agents 作為位置。

此選項會將自訂代理人新增到您的工作區，讓其他團隊成員在開啟專案時可以使用它。
將自訂代理人命名為「Reviewer (審查者)」。這會在 .github/agents 資料夾中建立一個名為 Reviewer.agent.md 的新檔案。

用以下內容取代檔案內容。請注意，此自訂代理人不允許程式碼變更。

---
name: 'Reviewer'
description: 'Review code for quality and adherence to best practices.'
tools: ['vscode/askQuestions', 'vscode/vscodeAPI', 'read', 'agent', 'search', 'web']
---
# Code Reviewer agent

You are an experienced senior developer conducting a thorough code review. Your role is to review the code for quality, best practices, and adherence to [project standards](../copilot-instructions.md) without making direct code changes.

When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed.

## Analysis Focus
- Analyze code quality, structure, and best practices
- Identify potential bugs, security issues, or performance problems
- Evaluate accessibility and user experience considerations

## Important Guidelines
- Ask clarifying questions about design decisions when appropriate
- Focus on explaining what should be changed and why
- DO NOT write or suggest specific code changes directly

儲存檔案。在聊天檢視中，您現在可以從代理人選取器中選取此自訂代理人。
透過從代理人選取器中選取 Reviewer (審查者) 並輸入以下提示來測試您的自訂代理人
```
Review my full project
```
請注意 AI 現在如何充當程式碼審查者，提供分析和改進建議。

步驟 5：使用智慧動作取得預建置的 AI 協助

智慧動作提供直接整合到 VS Code 介面中的 AI 功能，無縫地融入您的開發工作流程。與聊天互動不同，智慧動作會在您最需要它們的地方以上下文方式出現。讓我們以產生提交訊息為例進行探索。

按下 ⌃⇧G (Windows、Linux Ctrl+Shift+G) 或選取活動列中的來源控制圖示，以開啟 Source Control (來源控制) 檢視。
如果您尚未為專案初始化 Git 存放庫，請在來源控制檢視中選取 Initialize Repository (初始化存放庫) 來執行此操作。
透過選取您要提交的檔案旁邊的 + 按鈕來暫存您的變更。
選取 星火圖示 以根據您暫存的變更產生提交訊息。

AI 會分析您暫存的變更並產生遵循傳統提交標準的描述性提交訊息。AI 會考量：
- 哪些檔案已變更
- 變更的性質 (新增功能、錯誤修正、重構)
- 修改的範圍和影響
檢閱產生的訊息。如果您滿意，請繼續進行提交。如果您想要不同的風格或重點，請再次選取星火圖示以產生替代訊息。

像產生提交訊息這樣的智慧動作，展示了 AI 如何自然地整合到您現有的工作流程中，而不需要您切換到聊天介面。VS Code 還有許多其他智慧動作可以協助您進行偵錯、測試等等。

後續步驟

恭喜！您已建置一個完整的任務管理應用程式，並學習如何在 VS Code 的核心功能中有效地與 AI 協作。

您可以透過探索其他自訂選項來進一步增強 AI 的功能：

為規劃、偵錯或文件等不同任務新增更多專門的代理人。
為特定的程式語言或框架建立自訂指示。
使用來自 MCP (模型內容通訊協定) 伺服器或 VS Code 擴充功能的額外工具來擴展 AI 的功能。