GitHub Copilot app 工作階段如何在 VS Code 延續

Agent 已完成你這項修改的大部分工作。現在，你想仔細檢視其中一項實作細節，手動調整幾行，並在正式推出前於本機執行專案。

不過，這項工作仍在 GitHub Copilot app 中……而你會在編輯器內檢視差異、偵錯程式碼及作最後調整。你是否必須二選一：留在工作階段內，還是在 Visual Studio Code 重新開始？

不用。你可以直接在 VS Code 開啟 Copilot app 工作階段，並在保留原有對話、程式碼變更及工作脈絡的情況下繼續工作。這樣一來，Copilot 可以處理重複或耗時的工作，然後把控制權交還給你，讓你仔細檢視、親自編輯及在本機測試。

本教學會教你如何：

• 在 VS Code 開啟 Copilot app 工作階段。
• 逐行檢視 Agent 的變更。
• 在編輯器中延續同一段對話。
• 在本機修改及測試程式碼。
• 將更新推送至與工作階段相關聯的 Pull Request。

先決條件 

開始前，請確保你已準備好： 

• 已安裝並登入 GitHub Copilot app。 
• 已安裝 Visual Studio Code，並連接至同一個 GitHub 帳戶。 
• 一個包含你想檢視或繼續處理的程式碼變更的 Copilot app 工作階段。 
• 有權在該工作階段所用的儲存庫中工作並推送變更。 

本教學假設你已熟悉 VS Code 的操作方式、如何在其整合式終端機執行命令，以及如何使用 Git 分支和 Pull Request。

1. 從 Copilot app 中的工作階段開始

開啟你想繼續處理的工作階段。交由 VS Code 接手前，先花一點時間檢視工作內容和 Copilot 已完成的工作。

工作階段不只包含一系列已修改的檔案，也記錄了產生這些變更的工作、計劃和對話。如果你想了解 Copilot 為何選擇某種實作方式，或要求它修改部分工作，這些脈絡便十分重要。

移至 VS Code 前，你不必整理過往內容，也不必把內容複製到新的對話中。

2. 在 VS Code 開啟工作階段

在工作階段中選擇 Open in VS Code。如果 app 顯示多個支援的編輯器或 VS Code 安裝版本，請選擇你想使用的版本。

VS Code 會使用與該工作階段相關聯的 worktree 開啟專案，並在 Copilot 側邊欄顯示現有工作階段。

原有工作的以下三個部分會互相連結：

• 工作階段脈絡：工作內容、計劃和對話仍可供查看。
• 差異：Agent 修改的檔案和程式碼行已準備好供你檢視。
• worktree：VS Code 會開啟工作階段使用的同一個獨立工作樹。

你會繼續使用現有工作階段，而不是在新的編輯器視窗中重新建立工作內容。

3. 檢視 Agent 的變更

編輯前，先在 VS Code 檢視差異。開啟「原始碼控制」檢視以查看已變更的檔案，然後選取檔案，逐行檢視變更。

檢視實作時，請像檢視其他提議的變更一樣仔細。尤其要確認：

• 程式碼能解決所要求的問題。
• 實作方式符合儲存庫的慣例。
• 妥善處理錯誤狀態和邊界情況。
• 測試涵蓋已變更的行為。
• 沒有修改無關的檔案或行為。

保留下來的對話有助你瞭解 Copilot 如何得出這種實作方式。如果有不清楚的地方，可以繼續在側邊欄向 Copilot 提示。例如：

Explain why you changed this function instead of adding a new helper. Identify any behavior this could affect.

你亦可以要求 Copilot 作出另一項修改。由於工作階段與工作樹仍然保持連結，你無須從頭描述任務。

4. 進行手動編輯

瞭解建議的修改後，直接在 VS Code 編輯任何檔案。

以下情況可透過手動調整更快或更容易完成：

• 調整標籤或錯誤訊息。
• 為求清晰而重新命名變數。
• 調整版面配置或樣式。
• 加入遺漏的測試案例。
• 套用存放庫特定慣例。

你正在編輯工作階段現有的工作樹，因此手動修改會直接建基於 Agent 的工作。你無須在目錄之間複製檔案，也無須手動重新建立分支。

5. 在本機執行並驗證專案

使用 VS Code 整合式終端機執行專案一般的驗證流程。實際指令視乎存放庫而定，但部分網頁應用程式的例子可能包括：

• npm install
• npm test
• npm run lint
• npm run dev

對待 Agent 產生的修改，應與對待人手編寫的程式碼一樣：執行相關測試、檢查失敗項目，並自行驗證行為。

如果開發伺服器顯示 localhost URL，請開啟該網址，在瀏覽器中測試修改。若 VS Code 設定支援，你可以在 VS Code 整合式瀏覽器中開啟網址，並在不離開編輯器的情況下檢視結果。

對於用戶介面修改，請驗證要求的行為及相關狀態。例如，檢查修改後的元件在不同檢視區大小下的表現，並確認載入、空白及錯誤狀態仍正常運作。

6. 繼續使用 Copilot，或自行編輯

在任何時候，你都可以選擇最適合下一步的互動方式：

• 當修改需要全存放庫分析或重複編輯時，向 Copilot 提示。
• 當你清楚知道要作出甚麼修改時，直接編輯。
• 測試及完善實作時，反覆交替使用兩種方式。

例如，手動調整 UI 後，你可以向 Copilot 提出要求：

為更新後的標籤加入測試，並執行相關測試檔案。不要修改無關元件。

由於你仍在原本的工作階段中，Copilot 會保留理解「更新後的標籤」所需的上下文。

7. 提交並推送已完成的修改

實作準備就緒後，再檢視一次最終差異。然後使用 Source Control 檢視或整合式終端機提交並推送修改：

• git status
• git add
• git commit -m "Refine session changes"
• git push

採用存放庫一般的分支、提交、審查及核准慣例。由於 VS Code 開啟的是與工作階段關聯的工作樹及分支，推送該分支即可更新目前追蹤這項工作的 pull request。

無須把已完成的檔案複製到另一個 checkout，也無須手動重新連結工作與 pull request。

從 Agent 到編輯器的連貫工作流程

在 VS Code 開啟 Copilot app 工作階段，讓你可以清楚分工，而不會把工作拆開。Copilot 可以負責較大型或重複的實作，而你則可以進入編輯器，進行詳細審查、針對性修改、本機測試及最後潤飾。

工作階段、差異及工作樹都會跟隨你。先在 Copilot app 指示工作；想親自控制時，切換至 VS Code，然後透過同一個 pull request 工作流程推送完成的成果。

準備好試用嗎？ 下載 GitHub Copilot app，開始工作階段，準備繼續編碼時再於 VS Code 開啟。

文章 如何在 VS Code 繼續 GitHub Copilot app 工作階段 最初刊登於 The GitHub Blog。