🚀 在 VS Code 中！

Visual Studio Code 和 GitHub Copilot

2023 年 3 月 30 日，作者：Chris Dias，@chrisdias

AI 並未撰寫這篇部落格文章，但它將使您的開發體驗變得難以置信。

注意：如果您想了解 Visual Studio Code 中最新的 GitHub Copilot 體驗，請前往 VS Code 中的 GitHub Copilot 主題，您可以在其中找到有關 Copilot 編輯器整合和 Copilot Chat 功能的詳細資訊，例如內嵌聊天、專用聊天檢視和快速聊天。

現今圍繞人工智慧 (AI) 有許多討論、興奮和一些擔憂。進展幾乎每天都在發生，很難跟上。但是一旦您嘗試過，您很快就會意識到超過一百萬 Copilot 使用者每天所見，這項技術不會讓人失望，特別是對於像 OpenAI 的 GPT-3.5/4 這樣的大型語言模型 (LLM)。

在這篇文章中，我們想簡要介紹 VS Code 中 AI 的背景，向您展示一些由 GitHub Copilot 驅動的令人興奮的新體驗，並讓您了解我們對未來發展方向的看法。

GitHub Copilot "V1"

Microsoft 的開發人員 AI 服務是 GitHub Copilot，如果您還沒有看過 GitHub 對整個開發生命週期的願景，請查看這篇很棒的部落格文章。

自 Copilot 擴充功能首次發布以來，已經過了一年多。Oege De Moor 和他在 GitHub 的團隊與 OpenAI 合作，推出了第一個大規模使用 LLM 進行開發的範例，特別是 OpenAI 的 Codex 模型。

Editor with Copilot generated ghost (faded) text suggestions

Copilot 透過根據周圍程式碼的上下文提供「幽靈文字」建議，為您正在撰寫的程式碼提供即時提示。如果您將您的意圖寫成註解或使用描述性的函式名稱，Copilot 可以使用這些提示來自動產生程式碼，逐字、逐行甚至逐區塊。

這是一種非常有效的體驗，通常幽靈文字就能直接運作，您很快就會以流暢的「Tab-Tab-Tab」開發流程結束程式碼撰寫。

事實證明，這僅僅是個開始。

編輯器內聊天

我們知道 AI 滲透到開發流程只是時間問題。我們一直在與 GitHub Next 團隊合作開發 Copilot 和 Copilot Labs 擴充功能，但 ChatGPT 在 2022 年 11 月的發布顯著加速了時間表。

VS Code 團隊舉辦了一場內部黑客松，探索如何更深入地將 AI 整合到 VS Code 中，並提出了許多很酷的想法，例如改進的重新命名和重構、基於範例的程式碼轉換，以及使用自然語言建立檔案 glob 模式或正規表示式的方法。

儘管這些想法很有趣，但我們仍然圍繞著聊天體驗打轉。我們對此抱持著健康的懷疑態度。我們的生活中真的還需要另一個聊天體驗嗎？VS Code 是一個編輯器，我們的工作是讓您進入「心流」狀態，並透過消除干擾來幫助您保持在那裡，同時快速開發出下一個獨角獸。

我們發現一個有趣的探索，涉及將聊天直接建置到編輯器中。這是第一個原型

Prototype of a chat input in the editor

隨著我們在設計上不斷迭代，我們意識到這種使用者模型具有優勢。它可以輕鬆地從鍵盤調用，您可以在程式碼中保持專注，並且輸出是程式碼（而且只有程式碼）。

在下面的範例中，我們首先選取了 users 陣列，然後在 macOS 上按下 Cmd+I (或在 Windows/Linux 上按下 Ctrl+I) 以調出聊天輸入。然後我們要求 Copilot 將 username 欄位拆分為 firstName 和 lastName，最後我們點擊內嵌差異以查看 Copilot 所做的變更。

Inline change with preview of update

無需使用註解或過於描述性的函式名稱向 Copilot 表達您的意圖，只需按下 Cmd+I 並描述您想做什麼即可。在 Copilot 完成工作的同時保持專注。

擁抱聊天檢視

隨著圍繞 ChatGPT 的興奮情緒不斷增長，具有自訂聊天檢視的內部和外部擴充功能的數量也隨之增加。我們擔心這些擴充功能無法擴展，很難在 Web 檢視中支援按鍵繫結和主題等基本功能，而且對於那些使用 Monaco 編輯器進行程式碼區塊的人來說，很難擴展到數百個實例，更不用說這些編輯器實例中沒有擴充功能支援。因此，我們與 GitHub Copilot 團隊緊密合作，將聊天檢視建置到 VS Code 的核心中。

隨著時間的推移，儘管我們最初有所猶豫，但完整的聊天檢視體驗開始征服我們。我的意思是，誰不希望以這樣的問候語開始他們的一天呢？

A GitHub Copilot conversation within an extension's chat view

我們開始越來越多地意識到聊天檢視的好處。

與基於瀏覽器的聊天相比，整合體驗最明顯的價值在於我們可以向模型提供上下文，從而幫助紮根對話並提供更好的答案。例如，您無法輕易地要求基於瀏覽器的 ChatGPT 優化跨多個檔案的程式碼。VS Code 已經了解有關工作區的許多資訊，因為這是您可以跨檔案進行重構、尋找所有參考、前往定義等操作的方式。關鍵資訊可以負責任地嵌入到提示中，以便模型可以提供更相關的答案，最終讓您要求 Copilot 優化或重構具有跨多個檔案的相依性的程式碼。

許多程式設計問題的答案通常包含多個步驟。想想有多少部落格文章帶您了解整個過程 - 聊天檢視非常適合這種互動類型。偵錯就是一個很好的例子。如果我們誠實一點（而我們確實如此），配置 launch.json 和 tasks.json 進行偵錯並不容易。與其讓我們編寫更多文件或在編輯器中添加對話框和精靈，不如直接詢問「/vscode 新增 launch.json 和 tasks.json」，然後它會提供有關如何建立檔案、要添加的內容等等的說明，直到您像老闆一樣點擊中斷點並檢查變數。

A GitHub Copilot chat asking how to add debugging support

但也許整合聊天的最重要的原因是因為進行雙向對話可以幫助您判斷什麼是對的，什麼是錯的。大型語言模型並不完美，它們也不會「思考」。它們只是找出要回應的下一個最佳詞彙（當然，它們在這方面做得非常好）。

作為飛行員，您始終處於掌控之中，您可以決定接受 Copilot 的哪些建議以及將哪些程式碼引入您的工作區。提出澄清問題或提供額外細節的能力可以幫助您做出這些關鍵決策。

充分利用 Copilot

命名很難（我們應該知道，我們的產品名為「Code」）。但是，「GitHub Copilot」是一個很棒的名稱。與其稱為「pair programmer (雙人程式設計師)」或「auto pilot (自動駕駛)」或簡稱為「chat (聊天)」，「Copilot (副駕駛)」一詞在單字中傳達了多個重要概念。

因此，如果您將自己視為 VS Code 的飛行員，並將 GitHub Copilot 視為…嗯…副駕駛，您就會開始了解如何思考該服務以及如何與其互動以從您的座位夥伴那裡獲得最大收益。

  • 我們再怎麼強調也不為過：作為飛行員，您處於掌控之中。您可以決定接受哪些建議以及將哪些程式碼整合到您的工作區中。
  • Copilot 的主要工作是協助您，處理繁瑣或重複的任務。讓它根據現有模式編寫測試案例、製作範例資料或建立程式碼骨架。
  • Copilot 可以透過更多上下文做更多事情。我們都習慣於基於快速關鍵字的網路搜尋，但是您提供的細節越多，您將獲得的結果就越好。例如，與其「Node Express TypeScript」，不如要求 Copilot「使用 TypeScript 建立一個使用 Express.js 框架的 Node.js 網站骨架」，然後迭代！
  • 您可以透過在聊天輸入欄位中按下 / 將互動範圍限定為特定主題。例如，若要了解如何在編輯器中開啟或關閉麵包屑導航，請輸入 /vscode 關閉麵包屑導航。

Asking Copilot how to turn off VS Code breadcrumbs in the editor

  • 您也可以將主題用作快捷方式。與其在內嵌聊天中輸入「explain this code (解釋這段程式碼)」，不如直接輸入「/」+ Tab（/explain 的快捷方式）並按下 Enter。聊天檢視將會開啟，並提供所選程式碼的解釋。
  • 請注意，Copilot 並非完美，並且會給出錯誤的答案。提出澄清問題以幫助判斷哪些是對的，哪些是錯的，並使用向上/向下投票按鈕來幫助我們改善體驗。
  • 最後，幾乎與第一個提示同等重要的是，始終以友好的「Hello」或「早安」問候您的 Copilot，這將使您們倆的心情都更好。

立即開始使用

若要觀看 Copilot 的實際運作情況，並獲得更多關於如何充分利用 Copilot 的提示，請查看這段很棒的介紹影片，或深入了解 YouTube 上的完整 VS Code Copilot 系列。

上面討論的內嵌完成體驗今天即可使用。如果您沒有透過您的組織取得 Copilot，您可以在這裡註冊並開始免費試用。從那裡開始

  • 開啟 VS Code (最好使用 Insiders 版本)。
  • 開啟擴充功能檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X))，搜尋 GitHub Copilot 並安裝擴充功能。
  • 出現提示時，使用您的 GitHub ID 驗證身分。
  • 開啟程式碼檔案，讓魔法發生！

若要存取聊天體驗 (編輯器內、聊天檢視、快速聊天)，您需要安裝 GitHub Copilot Chat 擴充功能

  • 開啟擴充功能檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X))，搜尋 GitHub Copilot Chat 擴充功能。
  • 出現提示時，使用您的 GitHub ID 驗證身分。
  • 若要開啟編輯器內聊天，您可以選擇性地選取程式碼區塊，然後按下 ⌘I (Windows、Linux Ctrl+I)。要求 Copilot 撰寫一個快速排序函式。
  • 活動列中將會出現「聊天」圖示，點擊它以開啟聊天檢視。繼續，詢問 Copilot「撰寫一個程式來計算未載貨的燕子的空速」。
  • 若要試用快速聊天，您可以執行聊天：開啟快速聊天或使用 ⇧⌥⌘L (Windows、Linux Ctrl+Shift+Alt+L) 鍵盤快捷鍵。

您可以在 VS Code 中的 GitHub Copilot 主題中了解更多關於 GitHub Copilot 和 Copilot Chat 擴充功能的資訊。

負責任的 AI

像這樣在技術上的重大進展真的非常罕見。我們也相信 AI 是下一個重大轉變，它將改變我們思考、建構和使用開發人員工具的方式。它最終將以我們今天只能夢想的方式增強開發流程的每個方面。我們不敢說是第一個說這句話的人，但很快我們都會想知道，如果沒有 AI 驅動的工具，我們是如何建構、偵錯、部署和維護應用程式和系統的。

AI 並非完美（我們也不是！），並且會隨著時間的推移而改進。Microsoft 和 GitHub Copilot 遵循負責任的 AI 原則，並採用控制措施來確保您在使用該服務時的體驗是適當、愉快且有用的。我們理解，對於 AI 功能的快速擴展存在猶豫和擔憂，並且完全尊重那些不想要或不能使用 Copilot 的人。

連結各個環節

聊天助理、編輯器內聊天和內嵌完成的結合讓您可以利用 Copilot 的強大功能，無論您處於哪個程式碼編寫「區域」。剛開始入門或有疑問？使用聊天檢視。正在瘋狂地編寫程式碼，並且想要進行一些重構、更新或建立骨架？猛擊 Ctrl+I 並要求 Copilot 為您完成。逐步解決問題？使用內嵌完成，透過 Tab-Tab-Tab 的方式走向成功。

將聊天整合到由 GitHub Copilot 驅動的 VS Code 中，只是旅程中的一步。我們將繼續探索其他「內部迴圈」情境，例如使用自然語言描述搜尋模式或程式碼產生、自動產生提交訊息和提取請求描述、更智慧的程式碼重新命名、重構、轉換等等。

請在 GitHub、Twitter 和 YouTube 上關注我們。讓我們知道您的想法以及您對 VS Code 中 AI 的任何想法。

謝謝，

Chris 和 VS Code 團隊

祝您智慧編碼愉快！