🚀 在 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 聊天功能的詳細資訊，例如內嵌聊天、專用聊天檢視和快速聊天。

如今，圍繞人工智慧 (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 模式或 Regex 表達式的方法。

儘管這些想法很有趣，但我們仍然圍繞著聊天體驗打轉。我們對此抱持健康的懷疑態度。我們的生活中真的需要另一個聊天體驗嗎？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 add a launch.json and a 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 可以透過更多上下文執行更多操作。我們都習慣於基於快速關鍵字的 Web 搜尋，但是您提供的詳細資訊越多，您將獲得的結果就越好。例如，不要使用「Node Express TypeScript」，而是要求 Copilot「使用 TypeScript 搭建一個使用 Express.js 框架的 Node.js 網站」，然後進行迭代！
  • 您可以透過在聊天輸入欄位中按下 / 將互動範圍限定為特定主題。例如，若要了解如何在編輯器中開啟或關閉麵包屑導覽，請輸入 /vscode Turn off breadcrumbs。

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

  • 您也可以將主題用作捷徑。與其在內嵌聊天中輸入「explain this code」(說明此程式碼)，不如直接輸入「/」+ Tab (/explain 的捷徑) 並按下 Enter。聊天檢視將開啟並顯示所選程式碼的說明。
  • 請注意，Copilot 並非完美，並且會給出錯誤的答案。提出澄清問題以幫助判斷哪些是對的，哪些是錯的，並使用向上/向下投票按鈕來幫助我們改善體驗。
  • 最後，幾乎與第一個技巧一樣重要的是，始終以友好的「Hello」(您好) 或「Good Morning」(早安) 問候您的 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 團隊

祝您聰明編碼愉快！