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

遠端倉庫

2021年6月10日,作者:Brigit Murtaugh, @BrigitMurtaugh, Eric Amodio, @eamodio

注意:自本部落格文章釋出以來,Remote Repositories 擴充套件已更名為 GitHub Repositories。您也可以檢視最新的文件,其中包含有關該擴充套件的最新資訊。

我們很高興地向您介紹 Visual Studio Code 的新擴充套件 Remote Repositories!這是我們與 GitHub 的朋友們合作構建的一種新體驗,旨在讓您能夠快速、安全地在 VS Code 中處理原始碼倉庫。

Remote Repositories extension

一種更快捷的開啟原始碼倉庫的方式

在 VS Code 中,我們從一開始就提供了對 Git 的整合支援,並且透過擴充套件支援了許多其他的原始碼控制管理(SCM)提供商。這使得開發者可以直接在 VS Code 中克隆和處理倉庫。

然而,開發者每天大部分的工作都涉及到閱讀他人的程式碼:審查 pull request、瀏覽開源倉庫、嘗試新技術或新專案、檢查上游依賴項以除錯應用程式等。所有這些場景的共同點是,第一步通常是先在本地克隆倉庫,然後在您喜歡的程式碼編輯器(我們希望是 VS Code!)中開啟程式碼。然而,克隆倉庫需要時間,如果您忘記拉取最新程式碼,可能會導致您審查的是倉庫的過時版本,而且如果您對程式碼不熟悉,有時還可能存在安全風險。

由 GitHub 釋出的新擴充套件 Remote Repositories 使得在 VS Code 中開啟原始碼倉庫的體驗變得即時且安全。有了它,您可以直接在 VS Code 內部快速瀏覽、搜尋、編輯和提交到任何遠端 GitHub 倉庫(很快也將支援 Azure Repos),無需克隆!

您可以處理任意數量的倉庫,而無需在您的機器上儲存任何原始碼。Remote Repositories 為您節省了時間和本地磁碟空間,並讓您能夠完全在 VS Code 中完成所有的原始碼控制任務。

在這篇部落格文章中,我們將探討開始使用 Remote Repositories 是多麼簡單,開啟您的第一個遠端倉庫後可以做什麼,支援這個虛擬環境的技術細節,以及您今天如何向我們提供反饋。

在 VS Code 中開啟您的第一個遠端倉庫

讓我們在 VS Code 中開啟一個遠端倉庫。首先,請確保您已經安裝了 Remote Repositories 擴充套件。

目前,Remote Repositories 支援 GitHub 倉庫,對 Azure Repos 的支援也即將到來。在這篇部落格文章中,我們將從開啟 VS Code 倉庫 (microsoft/vscode) 開始。

安裝 Remote Repositories 擴充套件後,透過點選 VS Code 左下角的遠端指示器,我們可以立即訪問其 Open Remote Repository 命令(以及您安裝的任何其他遠端開發擴充套件的命令)。

Remote indicator in VS Code

如果您之前沒有在 VS Code 中登入過 GitHub,系統會提示您驗證您的 GitHub 賬戶。登入後,搜尋一個倉庫或 PR,選擇您想要的一個,然後就可以開始了。

在下面的短影片中,我們搜尋並選擇了 VS Code 倉庫,VS Code 重新載入,然後倉庫的內容就像我們本地克隆了一樣被加載出來。

Gif of using Open Remote Repository command, search for "microsoft/vscode," repo loads, open readme

您能夠瀏覽和貢獻於該倉庫,而無需離開 VS Code。您會感覺像在處理原生代碼一樣,使用熟悉的 VS Code 介面,並可以使用諸如 VS Code 資源管理器、搜尋、時間線檢視、快速開啟以及當然還有原始碼控制等功能。

您現在連線到了所謂的虛擬工作區(更多關於虛擬工作區的資訊請見下文);遠端指示器顯示為“GitHub”。當您將滑鼠懸停在遠端指示器上時,會收到通知,告知您在虛擬工作區中某些功能不可用。

Hover over remote indicator for limited virtual workspace message

虛擬工作區是一種特殊的設定,一些功能(如擴充套件)會被停用或功能受限。透過點選滑鼠懸停在遠端指示器上時顯示的 Some features 連結,您可以輕鬆找出哪些擴充套件被停用了。

點選連結會顯示哪些擴充套件被停用,哪些功能受限。將滑鼠懸停在擴充套件上可以看到其受限的功能。

VS Code Extensions view with limited and disabled extensions

如果您想在虛擬工作區中手動啟用某個擴充套件,可以在您的使用者 settings.json 檔案中使用 extensions.supportVirtualWorkspaces 設定。

    "extensions.supportVirtualWorkspaces": { "<extensionID>": true }

請記住,一個擴充套件可能沒有被實現為在無法訪問本地檔案系統的情況下處理虛擬工作區,因此該擴充套件可能無法按預期工作。

您打開了一個倉庫,接下來呢?

開啟您的倉庫後,Remote Repositories 使您可以輕鬆地為您的專案做出貢獻。

簡化的 Git 工作流,讓您的專案保持最新

Remote Repositories 幫助您每次都保持在倉庫的最新版本,無需任何複雜的 Git 命令。

每當您開啟一個新的倉庫時,您開啟的都是最新版本。並且每當 Remote Repositories 檢測到 GitHub 上有新的變更時,它會在狀態列中列出您需要拉取的提交數量。

VS Code Status bar showing "GitHub" in remote indicator and 1 pending change

並在資源管理器中高亮顯示已修改的檔案。

VS Code Explorer listing files and README has 1 change

當您提交更改時,它們會自動出現在 GitHub 上——您不需要推送您的更改或釋出您建立的任何新分支。

建立或檢出 pull request

Remote Repositories 與 GitHub Pull Requests and Issues 擴充套件 配合得很好,該擴充套件允許您直接在 VS Code 中審查和管理來自 GitHub 的 pull request 和 issue。並行使用這兩個擴充套件,可以快速檢出 PR 並處理 issue,而無需在本地克隆程式碼或離開 VS Code。

您可以對程式碼進行更改,基於該更改建立一個新分支和一個 pull request (PR),然後檢出該 PR,所有操作只需幾次點選即可完成。

Gif using GitHub Pull Request extension to create branch and PR, and check out that PR

您可以在我們的“與 GitHub 協同工作”文章中瞭解更多關於 GitHub Pull Requests and Issues 擴充套件的資訊。

將更改隔離到分支中

在完成工作時,您可能需要在不同分支之間切換。在典型的環境中,當您需要決定要儲藏(stash)或提交哪些更改時,這可能會變得很棘手。

Remote Repositories 讓您能夠輕鬆地同時在不同的分支上工作。當您暫停一個分支的工作並切換到一個新分支時,系統不會詢問您是否要儲藏更改——它們會自動保留在之前的分支上。當您回到之前的分支時,您的更改仍然在那裡,您可以從上次離開的地方繼續工作。

讓我們來探討如何將更改推送到一個分支。

在狀態列中,選擇您當前的分支以開啟分支列表,例如“main”。

VS Code Status bar on Main branch

選擇 + Create New Branch... 併為您的分支輸入一個名稱。

VS Code Command Palette with options to create new branch

然後您可以切換到那個新分支。

Remote Repositories prompt to switch to new branch

新分支將不包含您之前分支的任何更改。

限制

使用 Remote Repositories 時存在某些限制

  • 除錯、終端和任務 - 目前不支援。終端會在您的本地檔案系統上開啟,無法訪問遠端倉庫的虛擬檔案系統。
  • 有限的語言智慧 - 像 IntelliSense 和轉到定義這樣的功能可能會受到影響,因為許多語言尚不理解 Remote Repositories 的虛擬化環境。
  • 搜尋 - GitHub 搜尋本身有限制,例如不索引分支。Remote Repositories 可以透過啟用索引來避免這個限制並執行全文搜尋。索引會從 GitHub 拉取倉庫的一個淺層克隆並在本地執行全面搜尋,提供了比 GitHub 模糊的預設分支原生搜尋更強大的功能。您可以在搜尋檢視中啟用 Remote Repositories 的索引功能。
  • 擴充套件限制 - 並非所有擴充套件都支援在虛擬工作區中執行,但隨著時間的推移,將有更多擴充套件支援它。嚴重依賴於訪問本地檔案的擴充套件無法支援這種設定。更多詳情請參見下面的虛擬工作區部分。

我們才剛剛開始這段旅程,所以隨著我們繼續開發,功能集會不斷增長,限制會逐漸減少。

在更強大的環境中繼續工作

使用 Remote Repositories 時,VS Code 在一個並非所有功能都可用的環境中執行,因為沒有物理檔案系統。這對於快速開始瀏覽倉庫非常棒,但是當您準備進行一些更“高階”的工作時,比如:

  • 您想積極地處理該倉庫並獲得 VS Code 的全部功能。
  • 您需要透過定期從遠端拉取來積極跟蹤倉庫的變更。

為了轉向更高階的工作流,Remote Repositories 提供了一種方式來“升級”您的環境並在那裡繼續您的工作,從您當前所在的位置無縫銜接。

點選左下角的遠端指示器,然後選擇 Continue Working on...

VS Code Command Palette with "Continue Working on..." command

您將看到三個選項

  • 在本地克隆倉庫 (Clone Repository Locally):將當前倉庫克隆到您的本地機器。一個本地檔案瀏覽器會彈出,讓您選擇磁碟上的一個位置來克隆遠端倉庫。
  • 在容器卷中克隆倉庫 (Clone Repository in Container Volume):使用 Dev Containers 擴充套件將當前倉庫克隆到一個 Docker 容器卷中(您需要安裝 Dev Containers 擴充套件和 Docker)。VS Code 將重新載入並使用 Dev Containers 連線,遠端指示器現在將顯示為 Dev Container: {映象名稱}
  • 在 Codespaces 中開啟 (Open in Codespaces):在 GitHub Codespace 中繼續您的工作。當您選擇此選項時,一個瀏覽器會開啟並引導您到該倉庫的 Codespaces 列表。

VS Code Command Palette with options to continue locally, in a volume, or in Codespaces

既然我們已經探討了如何在 VS Code 中使用 Remote Repositories,我們想介紹一些支撐這一體驗的技術細節,以及如何確保您的擴充套件在 Remote Repository 會話中正常工作。

虛擬檔案系統和工作區

支援這種遠端工作的核心概念是虛擬檔案系統和虛擬工作區。

作為終端使用者,您只需要知道您想處理哪個倉庫或 PR——VS Code 會為您處理虛擬檔案系統並管理您的工作區。作為擴充套件開發者,您需要採用虛擬檔案系統 API 來確保您的擴充套件按預期執行。

虛擬檔案系統如何工作

當您在傳統的 git 工作流中工作時,您會 "git clone" 一個倉庫,然後一個副本會儲存到您計算機的本地檔案系統。但是當使用 Remote Repositories 時,程式碼並不存在於您的本地計算機上;它仍然只在 GitHub 上。

您透過一個虛擬檔案系統來處理程式碼,這是對物理存在於磁碟上的檔案的一種抽象。虛擬檔案系統可以提供來自像 GitHub 這樣的程式碼託管平臺、雲端儲存或資料庫的內容,並無縫地將它們作為檔案提供給 VS Code 中的使用者。

當您在虛擬檔案系統上開啟一個工作區時,它被稱為虛擬工作區。在虛擬工作區中工作時,您仍然可以訪問 VS Code 的功能,包括擴充套件。

確保您的擴充套件在虛擬工作區中正常工作

為了讓擴充套件正常執行,它們必須支援虛擬檔案系統。

當一個擴充套件沒有程式碼,只是一個純粹的顏色主題、快捷鍵繫結、程式碼片段或語法擴充套件時,那麼它可以在虛擬工作區中執行,無需任何適配。

執行實際程式碼的擴充套件,即定義了主入口點的擴充套件,需要進行檢查並可能需要適配。

對虛擬檔案系統的 API 支援是透過 FileSystemProvider 介面實現的。檔案系統提供程式為一個新的 URI scheme(例如,vscode-vfs)註冊,該檔案系統上的資源將由使用該 scheme 的 URI 表示(vscode-vfs://github/microsoft/vscode/package.json)。

在擴充套件的 package.json 中有一個 capabilities 屬性,其中的 virtualWorkspaces 子屬性用於表示一個擴充套件是否適用於虛擬工作區。

您可以在虛擬工作區擴充套件作者指南中瞭解更多關於虛擬檔案系統、工作區以及如何為擴充套件實現它們的資訊。

反饋與進一步閱讀

我們非常期待您嘗試 Remote Repositories,並迫不及待地想聽到您的反饋。

請安裝 Remote Repositories 擴充套件。您可以提交任何問題或功能請求,或在 Twitter 上 @code 告訴我們您的想法。

您也可以觀看我們關於如何使用 Remote Repositories 擴充套件的新 YouTube 影片

如果您是擴充套件作者,請檢視“擴充套件作者的虛擬工作區支援指南”,並在我們的跟蹤問題中分享任何問題或反饋。您也可以加入 Extension Authors 社群的 Slack 群組

編碼愉快!

Brigit Murtaugh, VS Code 專案經理 @BrigitMurtaugh
Eric Amodio, VS Code 首席軟體工程師 @eamodio