🚀 在 VS Code 中免費取得

GitHub Codespaces

GitHub Codespaces 為任何活動提供雲端支援的開發環境 - 無論是長期專案,還是短期工作,例如檢閱提取要求。您可以從 Visual Studio Code 或以瀏覽器為基礎的編輯器使用這些環境。

GitHub Codespaces extension

環境

環境是 GitHub Codespaces 的「後端」一半。這是與軟體開發相關的所有運算發生的位置:編譯、偵錯、還原等等。當您需要處理新專案、處理新工作或檢閱 PR 時,您可以簡單地啟動雲端託管環境,而 GitHub Codespaces 會負責正確設定它。它會自動設定您處理專案所需的一切:原始碼、執行階段、編譯器、偵錯工具、編輯器、自訂 dotfile 設定、相關的編輯器擴充功能等等。

自訂

GitHub Codespaces 可在每個專案的基礎上完全自訂。這可以透過在專案的存放庫中包含 devcontainer.json 檔案來完成,類似於 VS Code 開發容器 開發。

自訂範例包括

  • 設定要使用的以 Linux 為基礎的作業系統。
  • 自動安裝各種工具、執行階段和架構。
  • 轉送常用的連接埠。
  • 設定環境變數。
  • 設定編輯器設定並安裝慣用的擴充功能。

請參閱 設定 Codespaces 文件,以取得 codespace 專用的 devcontainer.json 設定。

每個使用者的 Dotfile 設定

Dotfiles 是檔名以點 (.) 開頭的檔案。它們通常包含應用程式的設定資訊,並且可以控制終端機、編輯器、原始檔控制和各種其他工具的行為。.bashrc.gitignore.editorconfig 是開發人員常用的 dotfiles 範例。

您可以指定包含 dotfiles 的 GitHub 存放庫、檔案的目標位置,以及在建立 codespace 時的安裝命令。

請參閱 個人化 Codespaces 文件,以瞭解如何將您的 dotfile 設定新增至 codespace。

開始使用

GitHub Codespaces 用戶端都有入門主題。這些主題將快速引導您完成登入 GitHub Codespaces、建立您的第一個 codespace,以及使用您偏好的用戶端連線到它

擴充功能作者

VS Code 擴充功能 API 隱藏了遠端執行的許多實作細節,因此許多擴充功能都可以在 GitHub Codespaces 環境中正常運作,而無需進行任何修改。但是,我們建議您在 codespace 中測試您的擴充功能,以確保其所有功能都能如預期般運作。請參閱關於 支援遠端開發和 GitHub Codespaces 的文章以取得詳細資訊。

以瀏覽器為基礎的編輯器

您還可以在瀏覽器中獲得免費、輕量型的 Visual Studio Code 體驗。以 Web 為基礎的編輯器可讓您安全快速地瀏覽 GitHub 的原始碼存放庫,並進行輕量的程式碼變更。您可以在編輯器中開啟任何存放庫、分支或提取要求,該編輯器具有 VS Code 的許多功能,包括搜尋和語法醒目提示。如果您想要執行或偵錯您的程式碼,您可以切換到雲端託管環境或 VS Code 桌面版。

若要存取此以瀏覽器為基礎的編輯器,您可以前往 github.com 上的存放庫並按下 . (句點鍵) 或將存放庫的 URL 變更為 github.dev/org/repo,並將 github.com 替換為 github.dev

限制:如果您以無痕模式執行瀏覽器或啟用廣告封鎖程式,您可能無法使用以 Web 為基礎的編輯器。

注意:此編輯器目前為技術預覽版。您可以立即試用並在 https://github.co/browser-editor-feedback 提供意見反應。

已知限制與調整

在使用 Codespaces,尤其是 Web 中的 VS Code 時,有些限制需要牢記在心。其中一些限制具有可用的解決方法或調整,以提供一致的開發體驗。

對於幾個問題 (特別是鍵盤快速鍵或那些列出桌面版解決方法的問題),您可以將 Codespace 安裝並用作 漸進式 Web 應用程式 (PWA)。

Installing Codespaces as PWA in Microsoft Edge

問題 原因 解決方法
Ctrl+Shift+P 無法在 Firefox 中啟動命令選擇區。 Ctrl+Shift+P 在 Firefox 中已保留。 使用 F1 啟動命令選擇區。
某些預設鍵盤快速鍵 (用於偵錯) 在 Web 中有所不同。 由於瀏覽器可能已經為這些鍵盤快速鍵註冊了動作,因此我們調整了 Web 中 VS Code 的預設值。 使用調整後的預設值。它們會顯示在偵錯動作的工具提示暫留上。
  • 在所有瀏覽器上,跳過是 Alt+F10 (而不是 F10)。
  • 在 Web 中,跳入在 Windows 瀏覽器上是 Alt+F11 (而不是 F11)。
在 Web 或桌面版中,F11 用於偵錯在 macOS 上無法運作。 這是一個已知的、非瀏覽器特定的限制。更多資訊可以在 問題 #5102 中找到。 停用 F11 以在 macOS 上顯示桌面。
  • 前往:系統偏好設定 > 鍵盤 > 快速鍵
  • 取消選取 顯示桌面 F11 選項
Ctrl+N 用於建立新檔案在 Web 中無法運作。 Ctrl+N 會開啟一個新視窗。 Ctrl+N 用於建立新檔案在桌面版中可以運作。
Ctrl+W 用於關閉編輯器在 Web 中無法運作。 Ctrl+W 會關閉瀏覽器中的目前索引標籤。 Ctrl+W 在桌面版中可以運作。
Ctrl+Shift+B 不會切換瀏覽器中的我的最愛列。 Codespaces 會覆寫此設定並重新導向至命令選擇區中的「建置」功能表。 目前沒有解決方法。
從 VS Code 拖放檔案到 Codespace (反之亦然) 無法運作。 您可以在 問題 #115535 中查看更多內容。 有幾個選項
  • 您可以右鍵按一下 Codespace 中的檔案,將其下載到本機電腦。
  • 您可以從檔案總管將檔案拖曳到 Codespace。
Web 中不支援 Angular 應用程式偵錯。 在瀏覽器中執行的程式碼基於安全性原因無法啟動另一個瀏覽器執行個體進入偵錯模式。 您有幾個選項
  • 正常偵錯 Node.js/服務端 js。
  • 在桌面版中開啟 Codespace,在這種情況下,將使用 配套 來啟動您的本機 Edge 或 Chrome 安裝。
從瀏覽器下載沒有副檔名的檔案會自動新增「.txt」 這是 Chrome 和 Edge 的行為方式。 內容和潛在的未來解決方案請參閱 問題 #118436
當您從遠端 (包括 Codespaces) 下載檔案時,執行位元等屬性會被移除。 內容和潛在的未來解決方案可以在 問題 #112099 中找到。 目前沒有解決方法。
當嘗試從 Codespace 下載某些資料夾時,您可能會看到提示「Your_codespace_name 無法開啟此資料夾,因為它包含系統檔案」。 使用者代理程式可以自由地對敏感目錄施加限制層級。更多資訊請參閱 此規格Chromium 的封鎖清單 除了規格和封鎖清單之外,沒有其他解決方法。
手動瀏覽 https://127.0.0.1:forwarded_port 無法從 Web 中的 Codespace 存取轉送的連接埠。 這是基於 Codespaces 如何處理連接埠轉送並為 Web 產生正確的 URL。 按一下連接埠轉送通知中的連結以開啟您的應用程式,或按一下 連接埠檢視 中的地球圖示,這兩者都將提供正確產生的連結。更多資訊請參閱 Codespaces 文件

某些擴充功能在 Web 中的行為有所不同

擴充功能 問題/原因 解決方法
具有與瀏覽器快速鍵重疊的鍵盤快速鍵的擴充功能,例如 Git Graph,它使用 Ctrl+R 來重新整理。 鍵盤快速鍵可能與現有的瀏覽器快速鍵重疊,例如 Ctrl+R 會重新整理 Safari 中的視窗。 您可以使用以桌面版為基礎,而不是以 Web 為基礎的 Codespace 來充分利用您的鍵盤快速鍵。不同的瀏覽器也可能有不同的行為 (您可以在 Chrome 中重新整理 Git Graph)。
語言套件,例如 Visual Studio Code 日語語言套件 Web 型 Codespaces 目前不支援語言套件擴充功能。 您可以使用以桌面版為基礎的 Codespace 來使用語言套件並設定顯示語言。
Bracket Pair Colorizer 2 它在瀏覽器中無法運作,因為它引入了一個安裝位置相依性,而這不容易修復。 使用 Bracket Pair Colorizer
瀏覽器偵錯工具,例如 Debugger for Firefox 需要 UI/桌面擴充功能主機的擴充功能不會在瀏覽器中載入。 您可以在本機 VS Code 中使用這些擴充功能 (未連線到 Codespaces)。或者,當您的應用程式從 Codespace 執行時,您可以使用替代方案,例如 Chrome DevTools 來檢查元素和設定中斷點。
開啟瀏覽器的擴充功能,例如 open in browser 需要 UI/桌面擴充功能主機的擴充功能不會在瀏覽器中載入。 如果可能,請使用替代擴充功能,例如 Live Server
專案管理員 專案管理員依賴同步自訂的 projects.json 檔案,這 目前不受支援 您可以在桌面版 Codespaces 或本機 VS Code 中使用擴充功能來儲存和管理您的專案,因為這些選項不需要同步自訂檔案。
依賴 Chrome 的擴充功能,例如 Protractor Test RunnerBrowser Preview Chrome 未包含在 Codespace 中。 嘗試尋找替代體驗,或者您可以在本機 VS Code (未連線到 Codespaces) 中在您的專案上使用這些擴充功能。
Flutter (以及整體 Flutter 開發) 由於 Docker 容器和 Codespaces 的性質,Flutter 工作流程的幾個方面受到限制。
  • Flutter 建議從 snap 安裝,但 snap 無法在 Codespaces 容器中安裝。
  • Android 模擬在容器內無法運作。
  • Codespaces 無法偵測插入您機器的 USB 裝置,這使得在實體裝置上進行開發變得不可能。
  • Codespaces 與其他 Linux 環境一樣,不支援 iOS 開發。
您可以使用本機 VS Code 進行 Flutter 開發。
LaTeX Workshop 此擴充功能提供三種功能來協助 LaTeX 撰寫:1) 一組呈現常用命令的檢視,2) PDF 預覽器,以及 3) 語言功能,例如程式碼片段和 IntelliSense。此擴充功能可以相當完整地使用,但有一些 Web 或安全性限制。 以下解決方法解決了檢視和預覽器功能區域的限制
  • 檢視本身可以正常運作,但一些命令嘗試啟動原生應用程式,例如在 OS 檔案總管中顯示輸出資料夾。這些在 Web 中沒有任何作用,因此使用桌面版是一種替代方案。
  • "latex-workshop.view.pdf.viewer" - 此設定提供類似於 Markdown 預覽 的 PDF 預覽器。您可以在瀏覽器索引標籤、單獨的 PDF 檢視器或 VS Code 索引標籤中預覽。
    只有瀏覽器索引標籤可在 Web 型 Codespaces 中使用。單獨的 PDF 檢視器會靜默失敗,而 VS Code 索引標籤會遇到 內容安全性原則 問題。VS Code 索引標籤檢視器由於此限制,還有其他功能無法使用。
Git Graph 某些 Git Graph Webview 功能可能在 Codespaces 中受到限制。例如,在認可中的檔案與 Git Graph Webview 之間切換可能會使 Webview 變為空白。 您可以在 VS Code 桌面版中完整使用 Git Graph。
其他 遠端開發擴充功能 (WSL、開發容器、遠端 - SSH) 無法安裝在 Codespace 中。 Codespace 已經是一個遠端內容。 如果您想要在另一個遠端內容 (例如 WSL 或遠端 SSH 電腦) 中執行,請開啟 VS Code 桌面版 (未連線到 Codespace) 並啟動其他遠端擴充功能之一。如果您想要使用 自訂開發容器,您可以在 Codespaces 和開發容器中使用相同的 .devcontainer
My_Favorite_Extension 無法運作且未在上面列出。 還有一些其他問題可能會阻止功能在遠端內容中如預期般運作。 在某些情況下,您可以使用另一個命令來解決此問題,但在其他情況下,可能需要修改擴充功能。查看 遠端擴充功能秘訣 以取得常見的遠端問題和解決這些問題的秘訣。

常見問題

為什麼擴充功能無法在瀏覽器中安裝

少數擴充功能具有內建的假設或需要在本機執行。範例是當擴充功能從桌面版上的 VS Code 安裝存取檔案時,或者當擴充功能依賴必須在桌面環境中執行的可執行檔時。當您嘗試在瀏覽器中安裝此類擴充功能時,您會收到通知,告知該擴充功能不可用。

請注意,從桌面上執行的 VS Code 連線到 Codespace 時,仍然可以使用此類擴充功能。

我該如何允許 VS Code 存取我的剪貼簿以進行讀取?

在某些情況下,VS Code 可能會要求您在從剪貼簿讀取時授與存取剪貼簿的權限。您應該可以從瀏覽器的設定 (搜尋「網站權限」) 或在右側的網址列中尋找此選項,從瀏覽器授與存取剪貼簿的權限

Allow clipboard access in browser

一旦您授與 VS Code 存取剪貼簿的權限,您就可以重試該操作。

我該如何允許 VS Code 始終開啟新的索引標籤和視窗?

有時瀏覽器會出於安全考量,阻止 VS Code 開啟新的索引標籤或視窗。如果發生這種情況,VS Code 將偵測到封鎖動作並明確提示使用者。但是,您可以透過開啟瀏覽器導覽列中內容功能表中的網站設定,並允許 彈出式視窗,來允許 VS Code 始終開啟新的視窗和索引標籤。

Allow pop-up window in browser

我該如何允許瀏覽器中的 VS Code 存取本機檔案和資料夾?

從瀏覽器在 VS Code 中開啟本機檔案和資料夾需要瀏覽器支援 File System Access API。截至今天,Microsoft Edge 和 Google Chrome 都提供此層級的支援。如果您想要在使用瀏覽器中的 VS Code 時存取本機檔案和資料夾,請考慮切換到這兩個瀏覽器之一。

問題或意見反應

如果您有問題,可以查閱 GitHub Codespaces 疑難排解指南。如果您想要提供意見反應,可以在 GitHub Codespaces 討論區 中輸入問題。