VS Code 中的 GitHub Copilot 入門

GitHub Copilot 改變了您在 Visual Studio Code 中編寫程式碼的方式。在本實踐教程中，您將構建一個完整的任務管理 Web 應用程式，同時探索 VS Code 的 AI 功能：智慧內聯建議、使用代理的自主功能開發、透過內聯聊天進行精確編輯、整合的智慧操作以及強大的自定義選項。

在本教程結束時，您將同時擁有一個可執行的 Web 應用程式和一個適應您開發風格的個性化 AI 編碼設定。

先決條件

在您的計算機上安裝了 VS Code。請從 Visual Studio Code 網站下載。
可以訪問 GitHub Copilot。請按照以下步驟在 VS Code 中設定 GitHub Copilot。

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

第 1 步：體驗內聯建議

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

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

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

內聯建議會在您鍵入時自動工作，從您的模式和專案的上下文學習。它們對於編寫樣板程式碼、HTML 結構和重複模式特別有幫助。

第 2 步：使用代理構建完整功能

代理是 VS Code 最強大的 AI 功能。給定一個自然語言提示，它們可以自主地規劃和實現跨多個檔案的複雜功能。讓我們使用它們來建立任務管理器的核心功能。

透過按 ⌃⌘I (Windows、Linux Ctrl+Alt+I) 或在 VS Code 標題欄中選擇聊天圖示來開啟聊天檢視。

聊天檢視使您可以與 AI 進行持續對話，從而更輕鬆地完善您的請求並獲得更好的結果。
在聊天檢視頂部的代理選擇器中，選擇 Agent 切換到自主編碼模式。
輸入以下提示並按 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 來接受所有更改。
在瀏覽器中開啟您的 index.html 檔案，檢視您的任務管理器。您可以新增任務，將其標記為完成，以及刪除它們。

提示
使用 Live Preview 擴充套件在 VS Code 中即時檢視您的開發更改。
讓我們新增一個附加功能。在聊天輸入框中輸入以下提示
```
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 應用它們。

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

第 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 支援更高階的自定義說明，例如為特定檔案型別應用說明。

建立用於程式碼審查的自定義代理

自定義代理為特定任務建立專門的 AI 角色。讓我們建立一個專注於分析和提供程式碼反饋的“Code Reviewer”代理。在自定義代理定義中，您可以定義 AI 的角色、特定指南以及它可以使用哪些工具。

開啟命令面板並執行 Chat: New Custom Agent 命令。
選擇 .github/agents 作為位置。

此選項會將自定義代理新增到您的工作區，使其他團隊成員在開啟專案時也可以使用它。
將自定義代理命名為“Code Reviewer”。這將在 .github/agents 資料夾中建立一個名為 Code Reviewer.md 的新檔案。

將檔案內容替換為以下內容。請注意，此自定義代理不允許程式碼更改。

---
description: 'Review code for quality and adherence to best practices.'
tools: ['usages', 'vscodeAPI', 'problems', 'fetch', 'githubRepo', 'search']
---
# 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

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

第 5 步：使用智慧操作獲取預構建的 AI 幫助

智慧操作將 AI 功能直接整合到 VS Code 的介面中，無縫連線到您的開發工作流。與聊天互動不同，智慧操作會在您最需要它們的地方按上下文出現。讓我們以提交訊息生成為例。

透過按 ⌃⇧G (Windows、Linux Ctrl+Shift+G) 或在活動欄中選擇原始碼管理圖示來開啟 Source Control 檢視。
如果您尚未為您的專案初始化 Git 儲存庫，請在原始碼管理檢視中選擇 Initialize Repository 進行初始化。
透過選擇要提交的檔案旁邊的 + 按鈕來暫存您的更改。
選擇 sparkle icon 以根據您暫存的更改生成提交訊息。

AI 會分析您暫存的更改，並生成一條遵循約定提交標準的描述性提交訊息。AI 會考慮
- 已更改的檔案
- 更改的性質（新增的功能、錯誤修復、重構）
- 修改的範圍和影響
檢視生成的提交訊息。如果您對其滿意，請繼續提交。如果您想要不同的樣式或重點，請再次選擇 sparkle icon 以生成替代訊息。

諸如提交訊息生成之類的智慧操作展示了 AI 如何自然地整合到您現有的工作流中，而無需您切換到聊天介面。VS Code 還有許多其他智慧操作可以幫助您進行除錯、測試等。

後續步驟

恭喜！您已經構建了一個完整的任務管理應用程式，並學會了如何在 VS Code 的核心功能中有效地使用 AI。

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

新增更多專門的代理以用於規劃、除錯或文件等不同任務。
為特定的程式語言或框架建立自定義說明。
透過 MCP（模型上下文協議）伺服器或 VS Code 擴充套件中的附加工具來擴充套件 AI 的功能。