Visual Studio Code 和 GitHub Copilot

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

這篇部落格文章並非由 AI 撰寫，但 AI 將使你的開發體驗令人難以置信。

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

如今，人工智慧引起了廣泛的關注、興奮，也帶來了一些擔憂。技術進步幾乎每天都在發生，很難跟上。但一旦你嘗試了它，你就會很快意識到超過一百萬 Copilot 使用者每天都在體驗什麼，這項技術不會令人失望，特別是對於像 OpenAI 的 GPT-3.5/4 這樣的大型語言模型 (LLM) 而言。

在這篇文章中，我們想介紹一下 VS Code 中 AI 的一些背景，向你展示一些由 GitHub Copilot 提供支援的令人興奮的新體驗，並展望我們對未來發展方向的看法。

GitHub Copilot“V1”

微軟的開發者 AI 服務是 GitHub Copilot，如果你還沒有了解 GitHub 對整個開發生命週期的願景，請檢視這篇精彩的部落格文章。

自 Copilot 擴充套件首次釋出以來已經一年多了。GitHub 的 Oege De Moor 和他的團隊與 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 中，並提出了許多很酷的想法，例如改進重新命名和重構、基於示例的程式碼轉換，以及使用自然語言建立檔案全域性模式或正則表示式的方法。

儘管這些想法很有趣，但我們一直在圍繞聊天體驗打轉。我們持健康的懷疑態度。我們的生活中真的需要另一種聊天體驗嗎？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

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

整合體驗相比基於瀏覽器的聊天的最明顯價值在於，我們可以為模型提供上下文，幫助 grounding 對話並提供更好的答案。例如，你不能輕易地要求基於瀏覽器的 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”是一個很棒的名字。它不是“結對程式設計師”或“自動駕駛”或僅僅是“聊天”，“Copilot”在一個詞中傳達了多個重要概念。

因此，如果你將自己視為 VS Code 的飛行員，將 GitHub Copilot 視為……嗯……副駕駛，你就會開始瞭解如何看待這項服務以及如何與它互動以從你的同伴那裡獲得最大收益。

我們不能再重複這一點了：作為飛行員，你處於掌控之中。你決定接受哪些建議以及將哪些程式碼整合到你的工作區中。
Copilot 的主要工作是協助你，處理平凡或重複的任務。讓它編寫測試用例、製作示例資料或根據現有模式搭建程式碼框架。
Copilot 可以利用更多上下文做更多事情。我們都習慣了基於關鍵字的快速網路搜尋，但你提供的細節越多，你獲得的結果就越好。例如，不要搜尋“Node Express TypeScript”，而是要求 Copilot“使用 Express.js 框架和 TypeScript 搭建 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 並不完美，會給出錯誤的答案。提出澄清性問題有助於判斷哪些是正確的，哪些是錯誤的，並使用向上/向下投票按鈕來幫助我們改進體驗。
最後，與第一個提示幾乎同樣重要的是，始終用友好的“你好”或“早上好”向你的 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 並不完美（我們也不是！），它會隨著時間推移而改進。微軟和 GitHub Copilot 遵循負責任的 AI 原則，並採用控制措施來確保你使用該服務的體驗是適當、愉快和有用的。我們理解圍繞 AI 能力快速擴充套件存在猶豫和擔憂，並完全尊重那些不想要或不能使用 Copilot 的人。

連線點

聊天助手、編輯器內聊天和內聯完成的結合使你能夠利用 Copilot 的力量，無論你處於何種編碼“區域”。剛開始還是有問題？使用聊天檢視。正在瘋狂地編寫程式碼並想進行一些重構、更新或框架搭建？按下 Ctrl+I 並讓 Copilot 為你完成。正在一步步解決問題？使用內聯完成，透過 Tab-Tab-Tab 走向成功。

將聊天整合到 VS Code 中（由 GitHub Copilot 提供支援）只是旅程中的一步。我們將繼續探索額外的“內迴圈”場景，例如使用自然語言描述搜尋模式或程式碼生成、自動生成提交訊息和拉取請求描述、更智慧的程式碼重新命名、重構、轉換等等。

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

謝謝，

Chris 和 VS Code 團隊

祝你智慧編碼愉快！