GitHub Copilot簡介

作者：許薰尹  精誠資訊/恆逸教育訓練中心資深講師
出刊日期：2024/2/21

GitHub Copilot 是一個由 GitHub 和 OpenAI 合作開發的人工智慧型程式設計助手。這個工具可以幫助開發者更快速、更高效地編寫程式碼。它使用機器學習模型，來理解和預測開發者打算寫的程式碼，從而自動生成程式碼的建議。 GitHub Copilot 可以直接支援多種流行的程式設計工具，例如Visual Studio 2022、 Visual Studio Code、JetBrains、GitHub Codespaces等等。它能夠理解多種不同程式語言的與法和應用程式設計的框架，並能根據開發者已經寫的代碼上下文提供程式碼建議。

此外，GitHub Copilot 還能不斷地從公開的代碼庫中進行學習，意味著它能夠提供最新的程式設計語法和社計慣例。不過，它也可能提供不完美的代碼，所以程式設計師還是需要檢視、調整由 Copilot 自動生成的程式碼。 如果你還沒開始使用GitHub Copilot，那麼就隨著本文的步驟，開始來了解它吧。

GitHub Copilot申請

要申請 GitHub Copilot首先要有GitHub 帳號，網址在：「https://github.com/」，點選畫面中的「點選 Sign up for GitHub」按鈕，請參考下圖所示：

圖 1：申請GitHub 帳號。

下一步會要求輸入電子郵件，請參考下圖所示：

圖 2：輸入電子郵件。

下一步會要求輸入密碼，密碼要15個字或至少8個字含大小寫，請參考下圖所示：

圖 3：輸入密碼。

下一步會要求輸入一個不重複的使用者名稱，請參考下圖所示：

圖 4：輸入一個不重複的使用者名稱。

下一步會要求設定Email preference，請參考下圖所示：

圖 5：設定Email preference。

接下來會進入驗證帳戶的步驟，請參考下圖所示：

圖 6：驗證帳戶。

以選擇使用Audio驗證帳戶為例，這步驟請按照系統的題目，仔細聽系統的問題，然後回答問題，不要照填答案，請參考下圖所示：

圖 7：使用Audio驗證。

填入答案，並按「Done」，注意不要照填答案，請參考下圖所示：

圖 8：填入答案。

下一步按「Create Account」系統會寄Launch Code到註冊的Email帳號，請參考下圖所示：

圖 9：「Create Account」。

接著你會看到輸入Launch Code的畫面，請參考下圖所示：

圖 10：輸入Launch Code。

改用電子郵件軟體收信，將收到的驗證碼填入上個步驟顯示的網頁輸入驗證碼，請參考下圖所示：

圖 11：電子郵件軟體收信。

輸完驗證碼自動導向歡迎畫面，可以先選「Skip personalization」跳過個人化設定，請參考下圖所示：

圖 12：歡迎畫面。

訂閱 GitHub Copilot 申請Github 帳號之後，便可訂閱 GitHub Copilot，需要支付相應的費用，具體費用的多寡則取決於你的使用情況。申請步驟如下，先登入GitHub網站：「https://github.com/」，點選右上角圖示，請參考下圖所示：

圖 13：登入GitHub網站。

從右邊的選單選取「Copilot」，請參考下圖所示：

圖 14：選取「Copilot」。

下一個步驟是選擇訂閱方案，請參考下圖所示，目前的方案是個人一個月10塊美金，一次訂閱一年少20塊，只要100美金，一個月內免費試用，一個月内可隨時取消訂閱不用付費。 在本文撰寫時，訂閱方案大約如下，詳細的訂閱方案還需要造訪官方網站：  個人訂閱（GitHub Copilot Individual）： 這是針對個人開發者的訂閱計劃。通常，它提供月付和年付兩種選擇，費用可能為每月 10 美元或每年 100 美元。  團隊或組織訂閱（GitHub Copilot Business）： 這是針對團隊或組織的訂閱計劃。費用和具體計劃可能因組織的大小和需求而異。詳細的價格和計劃信息可能需要進一步查閱 GitHub 官方網站。

圖 15：選擇訂閱方案。

下一個步驟是輸入付款相關資訊，請參考下圖所示：

圖 16：輸入付款相關資訊。

確認付款資訊，請參考下圖所示：

圖 17：確認付款資訊。

設定喜好，這部分的設定可以先略過，之後再回來修改，請參考下圖所示：

圖 18：設定喜好。

完成，請參考下圖所示：

圖 19：完成申請。

安裝Visual Studio Code 擴充程式

打開 Visual Studio Code開發工具，選取左邊工具列上的「Extensions 」，從「Extensions Marketplace」搜索並安裝 GitHub Copilot 擴充程式，然後按下「Install」按鈕進行安裝，請參考下圖所示：

圖 20：安裝GitHub Copilot擴充程式。

安裝完成之後會跳出一個對話盒畫面，詢問是否允許登入GitHub，選取「Allow」，請參考下圖所示：

圖 21：允許登入GitHub。

接著便導向GitHub登入畫面，使用你的 GitHub 帳號登入到 GitHub ，請參考下圖所示：

圖 22：允許登入GitHub。

輸完帳號、密碼之後會在瀏覽器跳出一個對話盒，要求授權以便存取你在GitHub的存儲庫和其他 GitHub 相關資料，按下「開啟」，請參考下圖所示：

圖 23：授權。 再來會出現一個對話盒詢問是否允許進行授權，按下「Open」按鈕，請參考下圖所示：

圖 24：允許進行授權。

完成授權之後就可以在Visual Studio Code中使用Github Copilot，你的瀏覽器應該會顯示如下畫面，請參考下圖所示：

圖 25：完成授權 。

進入到Visual Studio Code開發工具，檢視右下方便會出現一個GitHub小圖示顯示目前連線的狀態，請參考下圖所示：

圖 26：GitHub圖示。

除了安裝「GitHub Copilot」之外，使用相同的步驟選取左邊工具列上的「Extensions 」，從「Extensions Marketplace」搜索並安裝「GitHub Copilot Chat」擴充程式，然後按下「Install」按鈕進行安裝，如此在Visual Studio Code工具中就會出現一個聊天的視窗，請參考下圖所示：

圖 27：安裝「GitHub Copilot Chat」擴充程式。

使用GitHub Copilot 再來我們來看看如何在Visual Studio Code 中使用 GitHub Copilot，讓它提供程式碼建議和幫助我們更快速地編寫程式碼，以撰寫JavaScript程式碼為例。 在Visual Studio Code的選單「File」>「Open Folder」建立一個資料夾，請參考下圖所示：

圖 28：建立一個資料夾。

按一下「New File」按鈕，加入一個JavaScript檔案，命名為「demo.js」，請參考下圖所示：

圖 29：加入一個JavaScript檔案。

在程式設計視窗就可以看到GitHub Copilot的提示，你可以在程式設計畫面按下「Ctrl+ I」組合鍵來啟動GitHub Copilot，請參考下圖所示：

圖 30：GitHub Copilot的提示。

預設GitHub Copilot會根據你的環境來使用適當的語言與你對談，以筆者使用的英文開發環境來說，GitHub Copilot就會使用英文與你對話。這不妨礙我們想用中文與之對談，我們可以先按下「CTRL + I」組合鍵 ，啟動「Inline Chat」，然後在文字方塊中輸入描述，英文或中文皆可，舉例來說輸下以下字串，然後按Enter鍵，或用滑鼠點選右方的箭頭圖示： 產生一個函式驗證台灣身份證號碼是否正確 請參考下圖所示：

圖 31：Inline Chat。

GitHub Copilot會產生適當的程式建議，若建議的程式碼正是你想要的，可以按「Accept」按鈕；否則按下「Discard」按鈕，若想要看其它建議，可以按下「Regenerate」按鈕，請參考下圖所示：

圖 32：建議的程式。

我們可以進一步詢問GitHub Copilot這些程式碼的意義，選取產生出來的「validateTaiwaneseID」函式，然後按滑鼠右鍵，再按「Explain this」，請參考下圖所示：

圖 33：「Explain this」。

說明會顯示在Chat視窗，請參考下圖所示：

圖 34：Chat視窗。

根據環境與軟體的設定，GitHub Copilot可能會使用你不熟悉的語言來回答問題，請參考下圖所示：

圖 35：GitHub Copilot的回答。

我們可以要求GitHub Copilot改用自己熟悉的語言，如繁體中文來回答問題： 使用繁體中文回答上個問題 GitHub Copilot的回答，請參考下圖所示：

圖 36：GitHub Copilot的回答。

那麼接下來讓我們來問問如何使用「validateTaiwaneseID」這個函式，反白選取「validateTaiwaneseID」函式，直接按「CTRL+I」組合鍵，或是按滑鼠右鍵，然後按「Copilot」>「Start Inline Chat」，請參考下圖所示：

圖 37：Inline Chat。

輸入問題如下： 如何使用validateTaiwaneseID函式，Regenerate GitHub Copilot的建議會直接出現在程式畫面下方，若不滿意提供的建議，可以按下「Regenerate」按鈕，請參考下圖所示：

圖 38：「Regenerate」按鈕重新產生建議。

底下是GitHub Copilot提供的其中一個建議，我們選擇將程式碼插入到另一個新的檔案，儲存檔名為「main.js」，請參考下圖所示：

圖 39：將程式插入新檔案。

目前「main.js」程式碼如下：

 

?

1 2 3

const taiwaneseID = "A12345678"; const isValid = validateTaiwaneseID(taiwaneseID); console.log(isValid); // 输出 true 或 false，表示身份证号码是否有效

 

我們進一步詢問GitHub Copilot： 如何執行「main.js」，使用繁體中文回答 GitHub Copilot的回答，請參考下圖所示：

圖 40：GitHub Copilot的回答。

根據GitHub Copilot的建議，直接按下「CTRL+`」組合鍵開啟Terminal視窗，然後輸入「node main.js」，此時執行會出現一個「ReferenceError」例外錯��： PS C:\temp\kill\demo> node main.js C:\temp\kill\demo\main.js:2 const isValid = validateTaiwaneseID(taiwaneseID); ^ ReferenceError: validateTaiwaneseID is not defined at Object. (C:\temp\kill\demo\main.js:2:17) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:86:12) at node:internal/main/run_main_module:23:47 Node.js v18.18.1

請參考下圖所示：

圖 41：例外錯誤。

讓我們再度詢問GitHub Copilot如何解決這個例外錯誤，在「Chat」視窗輸入問題如下： 執行無法呼叫到demo.js中的validateTaiwaneseID方法，發生例外，ReferenceError: validateTaiwaneseID is not defined，如何解決 GitHub Copilot的回答，請參考下圖所示：

圖 42：GitHub Copilot的回答。

根據建議，利用GitHub Copilot的「Insert at Curor」功能，修改「main.js」中的程式碼，加入「require」一行程式匯入demo.js模組，請參考下圖所示：

圖 43：修訂程式碼。

然後根據GitHub Copilot的建議，複製exports這行程式碼，請參考下圖所示：

圖 44：修訂程式碼。

將複製的程式碼加到「demo.js」檔案，參考以下程式碼：

?

1 2 3 4 5 6 7 8 9 10

function validateTaiwaneseID(id) {   // Check if the ID number is 10 characters long   if (id.length !== 10) {     return false;   }      //程式碼略   return true; } module.exports = validateTaiwaneseID;

 

 

這次再回到「Teminal」視窗就可以正確執行程式碼了，執行結果請參考下圖所示：

圖 45：執行程式碼。

總結

GitHub Copilot 提供了許多好處，尤其是對於開發者和團隊來說。以下是一些 GitHub Copilot 好處的總結：

•  提高生產力： GitHub Copilot 能夠自動生成建議程式碼，幫助開發者更快速地編寫程式碼。這可以節省大量時間，尤其是在處理重複性高的程式碼時。 
• 減少錯誤： GitHub Copilot 的程式碼建議是基於機器學習模型生成的，因此它可以幫助開發者減少常見的語法和邏輯錯誤，提高程式碼的品質。 
• 學習機會： GitHub Copilot 可以從公開的程式碼庫中學習最佳實踐和程式碼撰寫風格，這有助於開發者不斷提升自己的技能。 
• 多語言支援： Copilot 支援多種程式語言和框架，使開發者可以在不同領域的項目中使用它。  自訂代碼片段： 開發者可以自行定義代碼片段，以滿足特定需求，並讓 Copilot 根據這些片段生成程式碼建議。 
• 團隊協作： 對於團隊來說，GitHub Copilot 可以幫助確保程式碼風格的一致性，並減少程式碼審查的時間。 
• 支援多種開發工具： GitHub Copilot 可以整合到多個常用的開發工具中，如 Visual Studio Code、Visual Studio 和 JetBrains IDE，使開發者可以在他們喜歡的環境中使用它。 
• 免費試用： GitHub Copilot 可能提供一定期限的免費試用，讓用戶可以在購買訂閱前試用其功能。

 總之，GitHub Copilot 是一個強大的程式設計助手工具，能夠提高開發者的生產力，減少錯誤，並促進團隊協作。它為程式設計提供了一個更高效和便捷的方式，現在就馬上註冊開始使用它吧。

相關學習

使用GitHub Copilot提高Coding生產力-程式設計AI詠唱