GitHub Copilot程式代理人初體驗 - 1

GitHub Copilot有一個程式代理人（GitHub Copilot coding agent），這個代理人就像一個會自己動手做事的「AI 程式設計師」。

它實際上是一個在背景中獨立運作的程式，可以幫你完成一些程式開發工作。你可以把一個 GitHub 議題（GitHub Issue）指派給 GitHub Copilot程式代理人，或者透過聊天（Chat）視窗把議題交給它。然後它就會自己在一個獨立的環境裡運作，幫你寫程式、設計新功能、修復程式臭蟲（bug）、或修改存放庫（repository）中的程式碼。它不需要你一直盯著，而是會自動去完成你交給它的工作。

在Visual Studio Code 開發工具中的GitHub Copilot Chat視窗內有一個「agent」模式，但是這個模式需要你參與工作。它會和你進行互動，你得跟它一起寫程式。而GitHub Copilot 程式代理人（GitHub Copilot coding agent） 則完全是自動的，你只需要交代任務給它，它就自己去做事情。

我們可以這樣比喻這兩者：

l  GitHub Copilot程式代理人（GitHub Copilot coding agent）：像是一個你雇請而來的「外包工程師」，你交給它任務，他便自己自動去完成，最後繳交成果給你。

l  Visual Studio Code 開發工具中的GitHub Copilot agent 模式：像是一個「共同合作寫程式的同事」，你們要一起討論、一起寫程式碼，才能完成任務。

工作流程

GitHub Copilot程式代理人（GitHub Copilot coding agent，簡稱為 @copilot）的工作流程分為幾個步驟：

l   指派任務（Assignment）：你可以把一個 GitHub 議題（GitHub Issue） 指派給 @copilot。

l  分析任務（Analysis）：@copilot 會先檢視你交給它的任務，以及整個存放庫（repository）的結構，了解專案是怎麼組成的。

l  開發階段（Development）：@copilot 會在一個獨立的 GitHub Actions 環境裡工作。這樣不會直接影響到你的主要程式碼。它可以探索你的程式碼，理解不同檔案和功能的關聯。它可以修改多個檔案、執行編譯/建置（build）以檢查程式是否能正確地運作。它可以跑測試（tests）程式碼，確保專案的功能是正常的。它可以執行程式品質檢查工具（linters），找出程式風格或語法上的小問題，並修正這些問題。

l  建立提取要求（Pull Request，簡稱PR（：Copilot 會把完成的程式修改打包，送出一個提取要求，你可以想像成它寫完功課後，把作業交到你的桌上。

l  人工審查（Review）：由你負責檢查看看 @copilot 的程式改動是否符合需求，如果有需要調整的地方，你可以在提取要求（Pull Request （上留言。

l  反覆修改（Iteration）：@copilot 會依照你的回饋，再次更新程式碼。然後重新提交修改過的版本。

我們可以簡單比喻工作流程就像是：

你（專案老闆） → 把任務交給 @copilot（小幫手） → @copilot在自己的小房間裡寫程式、測試 → 把成果交給你 → 你檢查、給意見 @copilot繼續修改，直到你滿意為止。

啟用GitHub Copilot程式代理人

要使用GitHub Copilot程式代理人（GitHub Copilot coding agent）之前，需要先登入到GitHub官網設定允許使用GitHub Copilot程式代理人存取存放庫（Repository），你可以選取你要的存放庫，或者偷懶開放所有存放庫，請參考下圖所示：

圖 1：允許GitHub Copilot程式代理人（Copilot coding agent）存取存放庫

另外需要在Visual Studio Code開發工具中安裝「GitHub Pull Requests」延伸模組，以便在開發工具中建立議題（Issue）或提取要求（Pull Request）請參考下圖所示：

圖 2：安裝「GitHub Pull Requests」延伸模組

接著我們將使用一個Vue.js專案來介紹如何與GitHub Copilot程式代理人溝通的大致過程。由於生成式AI的特性，每次回答的答案可能都不相同，讀者若照本文步驟嘗試可能會得到不同的結果。

使用GitHub Copilot Agent模式建立Vue.js專案

在Visual Studio Code開發工具中，使用Github Copilot建立Vue.js專案，在GitHub Copilot Chat視窗，切換為「Agent」模式，選擇想用的語言模型，本範例採用「GPT-4.1」，然後在視窗中撰寫提示如下：

建立一個Vue.js專案，名稱VueTodo ，首頁顯示’歡迎’訊息。

 

GitHub Copilot執行時可能會要求您進行授權以在「Terminal」視窗執行命令，這時可以選擇「Allow」按鈕，請參考下圖所示：

圖 3：進行授權

 

若有必要，你會需要重複進行授權的動作讓Github Copilot Agent能夠完成專案的建立，請參考下圖所示：

圖 4：重複進行授權

以筆者操作的步驟為例，GitHub Copilot Agent會在「Terminal」視窗執行「npx create-vite...」命令來建專案，並要求輸入Package名稱，並選擇適當的專案設定，請參考下圖所示：

圖 5：建立Vue.js專案設定

待專案建立完成之後，將自動啟動開發階段網站伺服器並賦予一個埠號，使用瀏覽器便連接到這個網站，首頁的畫面請參考下圖所示：

圖 6：使用瀏覽器連接到網站

在「Terminal」視窗按CTRL+C停止網站伺服器執行，GitHub Copilot Agent會繼續它的工作，在首頁上加上「歡迎」訊息，你可以在開發工具程式編輯視窗檢視它建立的程式碼是否滿足需求，然後選擇「Keep」保留程式碼或「Undo」復原程式碼來與之互動。待工作完成GitHub Copilot Agent便詢問是否使用「npm run dev」命令來執行網站，按下「Allow」按鈕執行之，請參考下圖所示：

圖 7：檢視GitHub Copilot Agent建立的程式碼

 

與GitHub Copilot Agent整個聊天互動的過程，請參考下圖所示：

圖 8：建立Vue.js專案對話過程

建好的網站執行結果，請參考下圖所示：

圖 9：Vue.js網站首頁

 

使用Source Control發行專案

在這個步驟中，我們要將專案發行到GitHub 存放庫，點選Visual Studio Code開發工具左邊「Source Control」>「Publish to GitHub」按鈕，請參考下圖所示：

圖 10：發行專案到GitHub 存放庫

 

下一步選取要將專案發行為「Public」或「Private」存放庫，本例選擇「Public」，請參考下圖所示：

圖 11：選擇將專案發行為「Public」或「Private」存放庫

 

稍候片刻，待檔案上傳到GitHub網站，完成後可以看到如下畫面：

圖 12：發行專案到GitHub 存放庫

此時若使用瀏覽器登入Github官網，便可以看到發行上來的專案，請參考下圖所示：

圖 13：發行到GitHub 存放庫的專案

 

建立GitHub議題（GitHub Issue）

GitHub Copilot 程式代理人（GitHub Copilot coding agent）工作流程的第一步是由你指派任務給 @copilot。在Visual Studio Code開發工具中安裝了「GitHub Pull Requests」延伸模組之後，便可以透過它來建立議題（Issue），以便在對應的 GitHub 存放庫上建立一個新的議題（Issue）來追蹤錯誤、功能請求或工作項目。現在點選Visual Studio Code開發工具左方「GitHub」>「Create an Issue」按鈕，使用「GitHub Pull Requests」延伸模組建立議題（Issue），請參考下圖所示：

圖 14：建立議題（Issue）

 

開發介面會產生一個名為「NewIssue.md」檔案，這個檔案中的第一行是標題，請參考下圖所示：

圖 15：「NewIssue.md」檔案結構

 

以下這幾個欄位是用來標記和組織 GitHub 議題（GitHub Issue） 的：

l  Assignees：代理人，被指定去執行某項任務的人，使用「@copilot」表示指派任務給GitHub Copilot程式代理人（GitHub Copilot coding agent）。

l  Labels：標籤，用來分類GitHub議題（GitHub Issue），例如程式錯誤（bug）、特點（feature）等等。你可以填寫一個或多個現有的標籤名稱（用逗號分隔）。

l  Milestone：里程碑，通常用來追蹤某個版本或階段的進度。填寫專案中已建立的 milestone 名稱（如 v1.0）。

l  Projects： 關聯的 GitHub Project（專案），可以填寫專案名稱或網址，讓GitHub議題（GitHub Issue）進入特定的 Project追蹤。如果不需要可以留空，若要指定，請填寫對應的名稱即可。

 

修改「NewIssue.md」檔案內容如下列表：

NewIssue.md

建立記錄待辦事項的網站基本頁面

<!-- This issue will be created in repo ucomdemo/RazorPages (https://github.com/ucomdemo/RazorPages). Changing this line has no effect. -->

Assignees: @Copilot

Labels: 功能增強

Milestone: V1.0

Projects:

 

<!-- Edit the body of your new issue then click the ✓ "Create Issue" button in the top right of the editor. The first line will be the issue title. Assignees and Labels follow after a blank line. Leave an empty line before beginning the body of the issue. -->

這是一個記錄待辦事項的網站

## 樣式

符合響應式網頁風格，使用Bootstrap設定UI與樣式。

## 擴充套件

使用Pinia進行狀態管理。

使用「vue-router」插件啟用路由。

## 細節

包含兩個網頁

Privacy頁顯示’版權宣告’訊息。

首頁，首頁需要有顯示代辦事項清單的功能

首頁並能夠新增、刪除與修改每一個待辦項目

代辦清單使用Pinia儲存

 

檔案編寫完成後，按下程式編輯視窗右上角打勾的按鈕送出儲存，送出後會在遠端 GitHub 上建立該議題（Issue），請參考下圖所示：

圖 16：送出議題（Issue）儲存

Visual Studio Code開發工具會跳出一個授權的對話盒詢問是否同意建立Label，按下「Yes」按鈕，請參考下圖所示：

圖 17：授權建立Label

建立完成下方會跳出通知，我們可以點選「Open Issue」按鈕開啟這個GitHub議題（GitHub Issue），請參考下圖所示：

圖 18：開啟GitHub議題（GitHub Issue）

我們可以在Visual Studio Code開發工具中直接檢視GitHub議題（GitHub Issue），請參考下圖所示：

圖 19：檢視GitHub議題（GitHub Issue）

總結

GitHub Copilot 程式代理人（GitHub Copilot coding agent）是一個能自動執行程式開發任務的 AI 工具，運作方式就像一位「外包工程師」。使用者只需在 GitHub 議題或 Visual Studio Code Chat視窗中指派任務，它便能在獨立的 GitHub Actions 環境完成程式設計、修正錯誤、測試與程式品質檢查，最後透過提取請求（Pull Request）交付成果。開發者則負責審查並提供回饋，GitHub Copilot程式代理人會依據意見反覆修改直到符合需求。相比之下，Visual Studio Code內的 「Agent」 模式更像「合作同事」，需要開發者與 AI 共同討論與撰寫程式碼，互動性較高。

整體工作流程包括：任務指派、分析存放庫、開發與測試、建立提取請求（Pull Request）、人工審查及反覆修改，形成完整的閉環。要啟用此功能，必須在 GitHub 網站授權 Copilot 存取存放庫，並於 Visual Studio Code安裝「GitHub Pull Requests」延伸模組，以便建立GitHub議題（GitHub Issue）與管理提取請求（Pull Request）。文中示範以 Vue.js 專案為例，GitHub Copilot程式代理人能自動建立專案、執行命令與生成程式碼，並與使用者互動確認修改，最後發佈到 GitHub 存放庫。此流程展現了 GitHub Copilot程式代理人作為「AI 開發助手」的高自動化與實用性，能顯著減少人工工作量並提升開發效率。

下一篇我們將談談人工審查的流程。