Code 結(jié)合使用。

GitHub Copilot 是什么

GitHub Copilot 是一個可以幫助你更簡單、更快速地編寫代碼的工具，由 GPT-3 提供支持。你只需編寫所需代碼的描述——例如，編寫一個函數(shù)來生成一個隨機(jī)數(shù)，或?qū)σ粋€數(shù)組進(jìn)行排序——Copilot 就會為你創(chuàng)建它。

它不只是創(chuàng)建一種解決方案，而是創(chuàng)建多個，你可以選擇你想要的一個。

在本教程中，我們將學(xué)習(xí)如何為 Visual Studio Code 設(shè)置 GitHub Copilot AI 工具，以及如何生成 JavaScript、React 和 HTML 代碼。

如何安裝 GitHub Copilot

在 VS Code 中使用 GitHub Copilot 的步驟如下：

1. 首先確保你已經(jīng)安裝了最新版本的 Visual Studio Code。你可以從官方網(wǎng)站（https://code.visualstudio.com/）下載并安裝。

2. 打開 VS Code，點(diǎn)擊左側(cè)邊欄的擴(kuò)展圖標(biāo)（Extensions），或者按下快捷鍵 Ctrl+Shift+X（Windows/Linux）或 Cmd+Shift+X（Mac）。

3. 在搜索框中輸入 "GitHub Copilot"，找到名為 "GitHub Copilot" 的擴(kuò)展，點(diǎn)擊 "Install" 按鈕進(jìn)行安裝。

4. 安裝完成后，重啟 VS Code。

5. 登錄 GitHub Copilot。點(diǎn)擊左上角的文件（File）> 首選項（Preferences）> 設(shè)置（Settings），在搜索框中輸入 "GitHub Copilot"，找到 "GitHub Copilot: Sign In" 設(shè)置項，點(diǎn)擊 "Edit in settings.json"，然后按照提示登錄你的 GitHub 賬戶。

6. 現(xiàn)在你可以在 VS Code 中使用 GitHub Copilot 了。當(dāng)你編寫代碼時，GitHub Copilot 會自動為你生成代碼片段和建議。你可以通過按下 Tab 鍵來接受建議，或者使用箭頭鍵在多個建議之間切換。

關(guān)于 GitHub Copilot 和 Visual Studio Code

GitHub Copilot 在編寫代碼時提供 AI 對程序員的自動完成樣式的建議。 有關(guān)詳細(xì)信息，請參閱“關(guān)于 GitHub Copilot Individual”。

如果使用 Visual Studio Code，可以直接在編輯器中查看并合并來自 GitHub Copilot 的建議。 本指南演示如何在適用于 macOS、Windows 或 Linux 的 Visual Studio Code 中使用 GitHub Copilot。

先決條件

• 若要使用 GitHub Copilot，必須擁有有效的 GitHub Copilot 訂閱。 有關(guān)詳細(xì)信息，請參閱“關(guān)于 GitHub Copilot 的計費(fèi)”。

• 若要在 Visual Studio Code 中使用 GitHub Copilot，必須安裝 Visual Studio Code。 有關(guān)詳細(xì)信息，請參閱?Visual Studio Code 下載頁面。

在 Visual Studio Code 中安裝 GitHub Copilot 擴(kuò)展

若要使用 GitHub Copilot，必須先安裝 GitHub Copilot 擴(kuò)展。

1. 在 Visual Studio Code Marketplace 中，轉(zhuǎn)到?GitHub Copilot 擴(kuò)展頁，然后單擊“安裝”。

2. 此時會顯示一個彈出窗口，要求打開 Visual Studio Code。 單擊“打開 Visual Studio Code”。

3. 在 Visual Studio Code 的“擴(kuò)展: GitHub Copilot”選項卡中，單擊“安裝”。

4. 如果以前未在 GitHub 帳戶中授權(quán) Visual Studio Code，系統(tǒng)會提示你在 Visual Studio Code 中登錄到 GitHub。

   • 如果以前已在 GitHub 上的帳戶中授權(quán) Visual Studio Code，系統(tǒng)將會自動授權(quán) GitHub Copilot。

   • 如果未收到授權(quán)提示，請單擊 Visual Studio Code 窗口底部面板中的鐘形圖標(biāo)。

     

5. 在瀏覽器中，GitHub 將請求 GitHub Copilot 所需的權(quán)限。 若要批準(zhǔn)這些權(quán)限，請單擊“授權(quán) Visual Studio Code”。

6. 要確認(rèn)身份驗證，請在 Visual Studio Code 的“Visual Studio Code”對話框中單擊“打開”。

查看第一個建議

注意：如果為 GitHub Copilot 啟用了重復(fù)檢測，則使用提供的代碼示例時，可能會收到有限的建議或沒有建議。 作為替代方法，你可以首先鍵入自己的代碼，以查看來自 GitHub Copilot 的建議。 有關(guān)重復(fù)檢測的詳細(xì)信息，請參閱“在 GitHub.com 上配置 GitHub Copilot 設(shè)置”。

GitHub Copilot 為多種語言和各種框架提供建議，但尤其適用于 Python、JavaScript、TypeScript、Ruby、Go、C# 和 C++。 GitHub Copilot 還可以幫助生成數(shù)據(jù)庫的查詢。 以下示例使用的是 JavaScript，但其他語言的工作方式類似。

1. 在 Visual Studio Code 中，創(chuàng)建一個新的 JavaScript (*.js) 文件。

2. 在 JavaScript 文件中，鍵入以下函數(shù)標(biāo)頭。 GitHub Copilot 將自動以灰色文本建議整個函數(shù)正文，如下所示。 具體的建議可能會有所不同。

   JavaScript

   function calculateDaysBetweenDates(begin, end) {
   

3. 要接受建議，請按?Tab。

注意：**** 如果未看到建議，請確保已啟用 GitHub Copilot。 應(yīng)在 Visual Studio Code 窗口右下角看到 Copilot 圖標(biāo)。

如果文件已配置為 GitHub Copilot 的排除內(nèi)容，則狀態(tài)欄中的圖標(biāo)將有一條對角線穿過。 將鼠標(biāo)懸停在該圖標(biāo)上可看到工具提示，告知哪些設(shè)置已應(yīng)用此限制。

有關(guān)詳細(xì)信息，請參閱“為 GitHub Copilot 配置內(nèi)容排除”。

查看替代建議

對于任何給定的輸入，GitHub Copilot 可以提供多個建議。 可以選擇要使用的建議，或拒絕所有建議。

1. 在 Visual Studio Code 中，創(chuàng)建一個新的 JavaScript (*.js) 文件。

2. 在 JavaScript 文件中，鍵入以下函數(shù)標(biāo)頭。 GitHub Copilot 將向你顯示建議。

   JavaScript

   function calculateDaysBetweenDates(begin, end) {
   

3. （可選）如果有其他建議，可以選擇查看。

   OS	查看下一個建議	查看上一個建議
   macOS	Option (?) 或 Alt+]	Option (?) 或 Alt+[
   Windows	Alt+]	Alt+[
   Linux	Alt+]	Alt+[

4. 或者，可以將鼠標(biāo)懸停在建議上方，查看 GitHub Copilot 命令面板以選擇建議。

5. 若要接受建議，請按?Tab。若要拒絕所有建議，請按?Esc。

部分接受建議

你可能不希望全部接受 GitHub Copilot 建議。 可以使用鍵盤快捷鍵來接受建議的下一個字詞或下一行。

1. 在 Visual Studio Code 中，創(chuàng)建一個新的 JavaScript (*.js) 文件。

2. 在 JavaScript 文件中，鍵入以下函數(shù)標(biāo)頭。 GitHub Copilot 將自動以灰色文本建議整個函數(shù)正文，如下所示。 具體的建議可能會有所不同。

   JavaScript

   function calculateDaysBetweenDates(begin, end) {
   

3. 要僅接受建議的下一個字詞，請使用以下鍵盤快捷鍵中的一種。

   操作系統(tǒng)	接受下一個字詞
   macOS	Command+→
   Windows	Control+→
   Linux	Control+→

4. 如果要接受下一行建議，則需要為命令?editor.action.inlineSuggest.acceptNextLine?設(shè)置自定義鍵盤快捷鍵。 有關(guān)設(shè)置自定義鍵盤快捷鍵的詳細(xì)信息，請參閱“在環(huán)境中配置 GitHub Copilot”。

5. 或者，可以將鼠標(biāo)懸停在建議上方，查看 GitHub Copilot 命令面板以選擇建議。

在新選項卡中查看多個建議

你可能不想獲得 GitHub Copilot 提供的任何初始建議。 可以使用鍵盤快捷方式來提示 GitHub Copilot 在新選項卡中顯示多個建議。

1. 在 Visual Studio Code 中，創(chuàng)建一個新的 JavaScript (*.js) 文件。

2. 在 JavaScript 文件中，鍵入以下函數(shù)標(biāo)頭。 GitHub Copilot 將向你顯示建議。

   JavaScript

   function calculateDaysBetweenDates(begin, end) {
   

3. 若要打開具有多個其他選項的新選項卡，請按?Ctrl+Enter。

4. 要接受建議，請單擊建議下方的“接受建議編號”。 若要拒絕所有建議，請關(guān)閉選項卡。

從注釋生成代碼建議

可以在注釋中使用自然語言描述要執(zhí)行的操作，GitHub Copilot 會提供代碼建議來實現(xiàn)你的目標(biāo)。

1. 在 Visual Studio Code 中，創(chuàng)建一個新的 JavaScript (*.js) 文件。

2. 在 JavaScript 文件中，鍵入以下注釋。 GitHub Copilot 將建議函數(shù)的實現(xiàn)。

   JavaScript

   // find all images without alternate text
   // and give them a red border
   function process() {
   

使用框架

還可以使 GitHub Copilot 為 API 和框架生成建議。 以下示例使用 GitHub Copilot 創(chuàng)建將返回當(dāng)前時間的簡單 Express 服務(wù)器。

1. 在 Visual Studio Code 中，創(chuàng)建一個新的 JavaScript (*.js) 文件。

2. 在 JavaScript 文件中，鍵入以下注釋，然后按?Enter。 GitHub Copilot 將建議 Express 應(yīng)用的實現(xiàn)。

   JavaScript

   // Express server on port 3000
   

3. 要接受每行，請按下?Tab，然后按下?Enter。

4. 鍵入以下注釋，然后按下?Enter。 GitHub Copilot 將建議默認(rèn)處理程序的實現(xiàn)。

   JavaScript

   // Return the current time
   

5. 若要接受每行，請按?Tab。

啟用或禁用 GitHub Copilot

可以在 Visual Studio Code 中啟用或禁用 GitHub Copilot。 Visual Studio Code 窗口底部面板中的 GitHub Copilot 狀態(tài)圖標(biāo)指示 GitHub Copilot 是啟用還是禁用。 啟用后，圖標(biāo)的背景色將與狀態(tài)欄顏色相匹配。 禁用后，圖標(biāo)的背景色將與狀態(tài)欄顏色形成對比。

1. 若要啟用或禁用 GitHub Copilot，請單擊 Visual Studio Code 窗口底部面板中的狀態(tài)圖標(biāo)。

   

2. 如果要禁用 GitHub Copilot，系統(tǒng)會詢問是全局禁用建議，還是要禁用當(dāng)前正在編輯的文件的語言。

   • 若要全局禁用 GitHub Copilot 的建議，請單擊“全局禁用”。
   • 若要禁用指定語言的 GitHub Copilot 的建議，請單擊“對 LANGUAGE 禁用”。

     

后續(xù)步驟

你已成功安裝 GitHub Copilot 并收到了你的第一個建議，但這只是開始！ 以下是一些有用的資源，可幫助你對 GitHub Copilot 執(zhí)行后續(xù)操作。

• GitHub Copilot：查看 GitHub Copilot 如何幫助你工作的實用示例。
• “在 IDE 中使用 GitHub Copilot Chat”：了解如何要求 GitHub Copilot 提供信息和幫助。
• “配置 GitHub Copilot”：這些指南提供有關(guān)如何將 GitHub Copilot } 配置為個人首選項的詳細(xì)信息。
• “管理 GitHub Copilot 的計費(fèi)”：了解有關(guān) GitHub Copilot 的計費(fèi)的詳細(xì)信息。
• “GitHub Copilot 故障排除”：這些指南提供了有關(guān) GitHub Copilot 故障排除的信息。

其他閱讀材料

• GitHub Copilot 網(wǎng)站
• “關(guān)于 GitHub Copilot Individual”
• “關(guān)于 GitHub Copilot Business”