🚀 在 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)。
F11 用於偵錯在 macOS 的 Web 版或桌面版中均無法運作。 這是已知的、非瀏覽器特定的限制。更多資訊可以在 issue #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 (反之亦然) 無法運作。 您可以在 issue #115535 中查看更多內容。 有幾個選項
  • 您可以右鍵按一下 Codespace 中的檔案,將其下載到您的本機。
  • 您可以從檔案總管將檔案拖曳到您的 Codespace。
Web 版中不支援 Angular 應用程式偵錯。 基於安全性考量,在瀏覽器中執行的程式碼無法啟動另一個處於偵錯模式的瀏覽器執行個體。 您有幾個選項
  • 正常偵錯 Node.js/服務端 js。
  • 在桌面版中開啟 Codespace,在這種情況下,將使用 companion 來啟動您的本機 Edge 或 Chrome 安裝。
從瀏覽器下載沒有副檔名的檔案會自動新增「.txt」 這是 Chrome 和 Edge 的行為方式。 內容和潛在的未來解決方案在 issue #118436 中。
當您從遠端 (包括 Codespaces) 下載檔案時,會移除可執行位元等屬性。 內容和潛在的未來解決方案可以在 issue #112099 中找到。 目前沒有因應措施。
當您嘗試從 Codespace 下載某些資料夾時,您可能會看到提示「Your_codespace_name 無法開啟此資料夾,因為它包含系統檔案」。 使用者代理程式可以自由地對敏感目錄施加限制級別。更多資訊請參閱 此規格Chromium 的封鎖清單 除了規格和封鎖清單之外,沒有其他因應措施。
手動瀏覽 http://localhost: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 Codespace 中未包含 Chrome。 嘗試尋找替代體驗,或者您可以在本機 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 討論區 中輸入問題。