參加你附近的 ，瞭解 VS Code 中的 AI 輔助開發。

Visual Studio Code 和 GitHub Copilot

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

AI 並沒有寫這篇部落格，但它將使你的開發體驗難以置信。

注意：如果你想了解 Visual Studio Code 中最新的 GitHub Copilot 體驗，請前往 GitHub Copilot in VS Code 主題，在那裡你會找到關於 Copilot 編輯器整合和 Copilot Chat 功能（如行內聊天、專用聊天檢視和快速聊天）的詳細資訊。

如今，圍繞人工智慧（AI）有很多熱議、興奮，以及一些擔憂。技術進步幾乎每天都在發生，讓人難以跟上。但是一旦你嘗試一下，你很快就會意識到超過一百萬 Copilot 使用者每天所見證的：這項技術不會讓人失望，特別是像 OpenAI 的 GPT-3.5/4 這樣的大型語言模型（LLMs）。

在這篇文章中，我們想介紹一些關於 VS Code 中 AI 的背景，向你展示一些由 GitHub Copilot 驅動的激動人心的新體驗，並展望我們未來的發展方向和方式。

GitHub Copilot "V1"

微軟的開發者 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 擴充套件上進行合作，但 2022 年 11 月 ChatGPT 的釋出大大加快了時間表。

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`，最後我們點選了 **Inline Diff** 來檢視 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”是一個很棒的名字。它不是“結對程式設計師”、“自動駕駛儀”或簡單的“聊天”，而是用一個詞傳達了多個重要概念。

所以，如果你把自己想象成 VS Code 的“飛行員”，而 GitHub Copilot 是……嗯……“副駕駛”，你就會開始理解如何看待這項服務，以及如何與它互動以充分利用你的這位“同伴”。

  • 我們怎麼強調都不為過：作為飛行員，你掌控一切。你決定採納哪些建議，以及將哪些程式碼整合到你的工作區中。
  • Copilot 的主要工作是協助你，處理那些單調乏味或重複性的任務。讓它編寫測試用例、製作示例資料，或根據現有模式搭建程式碼框架。
  • 上下文越多，Copilot 能做的就越多。我們都習慣了基於關鍵詞的快速網頁搜尋，但你提供的細節越多，得到的結果就越好。例如，不要只說“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

  • 你也可以將主題用作快捷方式。與其在行內聊天中輸入“解釋這段程式碼”，不如直接輸入“/”+ Tab（` /explain` 的快捷方式）然後按 Enter。聊天檢視將會開啟並解釋所選的程式碼。
  • 要知道 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“編寫一個程式來計算一隻未載重燕子的飛行速度”。
  • 要嘗試快速聊天，你可以執行 **Chat: Open Quick Chat** 或使用鍵盤快捷鍵 ⇧⌥⌘L (Windows, Linux Ctrl+Shift+Alt+L)。

你可以在 GitHub Copilot in VS Code 主題中瞭解更多關於 GitHub Copilot 和 Copilot Chat 擴充套件的資訊。

負責任的 AI

像這樣的重大技術進步確實少之又少。我們也相信 AI 是下一個將改變我們思考、構建和使用開發者工具方式的巨大轉變。它最終將以我們今天只能夢想的方式，增強開發過程的每一個方面。我們不聲稱是第一個這麼說的人，但很快我們都會想，沒有 AI 驅動的工具，我們當初是如何構建、除錯、部署和維護應用程式和系統的。

AI 並不完美（我們也不是！），它會隨著時間的推移而改進。微軟和 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 團隊

祝你**智慧**編碼愉快！