在 VS Code 中開始使用 GitHub Copilot
GitHub Copilot 改變了您在 Visual Studio Code 中編寫程式碼的方式。在這個實踐教程中,您將構建一個完整的任務管理 Web 應用程式,同時探索 Copilot 的核心功能:智慧程式碼補全、使用代理模式進行自主功能開發、使用內聯聊天進行精確編輯、整合的智慧操作以及強大的自定義選項。
完成本教程後,您將擁有一個可執行的 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.
請注意內聯聊天如何專門針對所選程式碼進行有針對性的改進。
-
檢查更改並選擇接受 (Accept) 來應用它們。
編輯器內聯聊天非常適合進行小範圍、集中的更改,而不會影響更廣泛的程式碼庫,例如新增錯誤處理、重構單個函式或修復錯誤。
第 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 角色。讓我們建立一個“程式碼審查員”模式,專注於分析程式碼並提供反饋。在聊天模式中,您可以定義 AI 的角色、準則以及它可以使用的工具。
-
開啟命令面板並執行 Chat: New Mode File 命令。
-
選擇
.github/chatmodes
作為新模式檔案的位置。此選項將聊天模式新增到您的工作區,使其他團隊成員也能使用它。
-
將聊天模式命名為“Code Reviewer”。這將在
.github/chatmodes
資料夾中建立一個名為Code Reviewer.md
的新檔案。 -
用以下內容替換檔案內容。請注意,此聊天模式不允許更改程式碼。
--- description: 'Review code for quality and adherence to best practices.' tools: ['codebase', 'usages', 'vscodeAPI', 'problems', 'fetch', 'githubRepo', 'search'] --- # Code Reviewer Mode 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. ## Analysis Focus - Analyze code quality, structure, and best practices - Identify potential bugs, security issues, or performance problems - Evaluate accessibility and user experience considerations - Assess maintainability and readability ## Communication Style - Provide constructive, specific feedback with clear explanations - Highlight both strengths and areas for improvement - Ask clarifying questions about design decisions when appropriate - Suggest alternative approaches when relevant ## Important Guidelines - DO NOT write or suggest specific code changes directly - Focus on explaining what should be changed and why - Provide reasoning behind your recommendations - Be encouraging while maintaining high standards When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed.
-
儲存檔案。在聊天檢視中,您現在可以從聊天模式下拉選單中選擇此自定義模式。
-
測試您的自定義審查員模式
- 從模式下拉選單中選擇程式碼審查員 (Code Reviewer)。
- 輸入以下提示:“Review my full project” (審查我的整個專案)
請注意 AI 現在如何像程式碼審查員一樣行事,提供分析和建議,而不會直接編寫程式碼。
您的個性化 AI 設定現在包括:
- 確保程式碼質量一致的自定義指令
- 針對不同型別工作的專用聊天模式
第 5 步:使用智慧操作獲取預置的 AI 輔助
智慧操作將 AI 功能直接整合到 VS Code 的介面中,無縫地融入您的開發工作流。與聊天互動不同,智慧操作會在您最需要的地方根據上下文出現。讓我們以提交訊息生成為例進行探索。
-
按下 ⌃⇧G (Windows、Linux Ctrl+Shift+G) 或選擇活動欄中的原始碼管理圖示來開啟原始碼管理檢視。
-
如果您的專案尚未初始化 Git 倉庫,請在原始碼管理檢視中選擇初始化倉庫 (Initialize Repository)。
-
透過選擇要提交檔案旁邊的 + 按鈕來暫存您的更改。
-
選擇閃爍圖示,根據您暫存的更改生成一條提交訊息。
AI 會分析您暫存的更改,並生成一條遵循常規提交標準的描述性提交訊息。AI 會考慮:
- 哪些檔案被更改
- 更改的性質(新增功能、修復錯誤、重構)
- 修改的範圍和影響
-
檢查生成的訊息。如果您滿意,請繼續提交。如果您想要不同的風格或重點,可以再次選擇閃爍圖示以生成另一條訊息。
像提交訊息生成這樣的智慧操作展示了 AI 如何自然地整合到您現有的工作流中,而無需您切換到聊天介面。VS Code 還有許多其他智慧操作可以幫助您進行除錯、測試等。
後續步驟
恭喜!您已經構建了一個完整的任務管理應用程式,並學會了如何高效地在 VS Code 的核心功能中使用 AI。
您可以透過探索其他自定義選項來進一步增強您的 AI 能力:
- 為不同任務(如規劃、除錯或文件編寫)新增更多專門的聊天模式。
- 為特定的程式語言或框架建立自定義指令。
- 透過 MCP(模型上下文協議)伺服器或 VS Code 擴充套件中的額外工具來擴充套件 AI 的能力。