GitHub Codespaces
GitHub Codespaces 為任何活動提供雲端驅動的開發環境——無論是長期專案,還是像審查提取要求這樣的短期任務。您可以從 Visual Studio Code 或瀏覽器型編輯器中使用這些環境。

環境
環境是 GitHub Codespaces 的「後端」部分。軟體開發相關的所有運算都在這裡進行:編譯、偵錯、還原等。當您需要處理新專案、接手新任務或審查 PR 時,只需啟動託管於雲端的環境,GitHub Codespaces 就會負責正確進行設定。它會自動設定您處理專案所需的一切:原始程式碼、執行階段、編譯器、偵錯工具、編輯器、自訂 dotfile 設定、相關的編輯器延伸模組等等。
自訂
GitHub Codespaces 可以在每個專案的基礎上完全自訂。這是透過在專案的存放庫中包含 devcontainer.json 檔案來完成的,類似於 VS Code Dev Containers 開發。
自訂範例包括
- 設定要使用的 Linux 作業系統。
- 自動安裝各種工具、執行階段與框架。
- 轉發常用的連接埠。
- 設定環境變數。
- 設定編輯器設定並安裝偏好的延伸模組。
請參閱 Configuring Codespaces 文件以取得 codespace 專屬的 devcontainer.json 設定。
依使用者設定的 Dotfile
Dotfiles 是檔名以點 (.) 開頭的檔案。它們通常包含應用程式的設定資訊,並可控制終端機、編輯器、原始檔控制以及各種其他工具的運作方式。.bashrc、.gitignore 和 .editorconfig 是開發人員常用的 dotfile 範例。
您可以在建立 codespace 時指定包含您 dotfile 的 GitHub 存放庫、檔案的目標位置以及安裝命令。
請參閱 Personalizing Codespaces 文件,瞭解如何將您的 dotfile 設定新增至 codespace。
入門指南
兩個 GitHub Codespaces 用戶端都有入門主題。這些主題將引導您快速登入 GitHub Codespaces、建立您的第一個 codespace,並使用您偏好的用戶端連線到它
- VS Code 中的 Codespaces - 使用 GitHub Codespaces 延伸模組連線並在您的環境中工作。
- 瀏覽器中的 Codespaces - 透過瀏覽器型編輯器連線至您的 codespace。
延伸模組作者
VS Code 延伸模組 API 隱藏了遠端執行的多數實作細節,因此許多延伸模組無需任何修改即可在 GitHub Codespaces 環境中運作。不過,我們建議您在 codespace 中測試您的延伸模組,以確保其所有功能都如預期般運作。詳細資料請參閱 支援遠端開發與 GitHub Codespaces 一文。
瀏覽器型編輯器
您還能完全在瀏覽器中體驗免費、輕量的 Visual Studio Code。這個網頁版編輯器可讓您安全且快速地瀏覽來自 GitHub 的原始程式碼存放庫,並進行輕量的程式碼變更。您可以在編輯器中開啟任何存放庫、fork 或提取要求,它擁有 VS Code 的許多功能,包括搜尋和語法突顯。如果您想要執行或偵錯程式碼,可以切換至雲端託管環境或 VS Code 桌面版。
若要存取這個瀏覽器型編輯器,您可以前往 github.com 上的存放庫並按下 . (句號鍵),或將存放庫的 URL 變更為 github.dev/org/repo,將 github.com 取代為 github.dev。
限制:如果您在無痕模式下執行瀏覽器,或啟用了廣告攔截器,您可能無法使用網頁版編輯器。
注意:此編輯器目前處於技術預覽 (Technical Preview) 階段。您今天就可以試用它,並在 https://github.co/browser-editor-feedback 提供意見反應。
已知的限制與因應措施
使用 Codespaces 以及特別是網頁版 VS Code 時,有一些限制需要記住。其中某些限制備有因應措施或調適方法,以提供一致的開發體驗。
針對數個問題(特別是鍵盤快速鍵,或是列出桌面版因應措施的問題),您可以將 Codespace 安裝並使用為漸進式網頁應用程式 (PWA)。

| 問題 | 原因 | 因應措施 |
|---|---|---|
| Ctrl+Shift+P 無法在 Firefox 中啟動命令選擇區。 | Ctrl+Shift+P 在 Firefox 中已被保留。 | 請使用 F1 來啟動命令選擇區。 |
| 某些預設鍵盤快速鍵(用於偵錯)在網頁中有所不同。 | 由於瀏覽器可能已經為這些鍵盤快速鍵註冊了動作,因此我們調整了網頁版 VS Code 的預設值。 | 請使用調整後的預設值。它們會顯示在偵錯動作上方的工具提示暫留中。
|
| 用於偵錯的 F11 在 macOS 的網頁或桌面版中無法運作。 | 這是一個已知的、非特定瀏覽器的限制。詳細資訊可以在 issue #5102 中找到。 | 停用 macOS 上的 F11 顯示桌面功能。
|
| 用於新增檔案的 Ctrl+N 在網頁中無法運作。 | Ctrl+N 會改為開啟新視窗。 | 用於新增檔案的 Ctrl+N 在桌面版中可以運作。 |
| 用於關閉編輯器的 Ctrl+W 在網頁中無法運作。 | Ctrl+W 會關閉瀏覽器中的目前分頁。 | Ctrl+W 在桌面版中可以運作。 |
| Ctrl+Shift+B 不會在瀏覽器中切換我的最愛列。 | Codespaces 會覆寫此設定,並重新導向至命令選擇區中的「建置」功能表。 | 目前沒有因應措施。 |
| 從 VS Code 拖放檔案至 Codespace(反之亦然)無法運作。 | 您可以在 issue #115535 中查看更多上下文。 | 有幾個選項可供選擇
|
| 網頁中不支援 Angular 應用程式偵錯。 | 基於安全考量,在瀏覽器中執行的程式碼無法以偵錯模式啟動另一個瀏覽器執行個體。 | 您有幾個選項
|
| 從瀏覽器下載沒有副檔名的檔案會自動新增 ".txt" | 這是 Chrome 和 Edge 的運作方式。 | 相關背景與潛在的未來解決方案請參閱 issue #118436。 |
| 當您從遠端(包括 Codespaces)下載檔案時,例如可執行位元等屬性將會被移除。 | 相關背景與潛在的未來解決方案可以在 issue #112099 中找到。 | 目前沒有因應措施。 |
當您嘗試從 Codespace 下載某些資料夾時,可能會看到提示訊息:「Your_codespace_name 無法開啟此資料夾,因為它包含系統檔案」。 |
使用者代理程式可以自由對敏感目錄施加限制層級。更多資訊請參閱本規格與 Chromium 的黑名單。 | 除了規格和黑名單之外,沒有其他額外的因應措施。 |
在網頁中手動造訪 https://:forwarded_port 將無法存取來自 Codespace 的轉發連接埠。 |
這是基於 Codespaces 如何處理連接埠轉發以及為網頁產生正確 URL 的方式。 | 按一下連接埠轉發通知中的連結來開啟您的應用程式,或按一下連接埠檢視畫面中的地球圖示,這兩者都會提供正確產生的連結。更多資訊請參閱 Codespaces 文件。 |
某些延伸模組在網頁中的運作方式會有所不同
| 擴充功能 | 問題 / 原因 | 因應措施 |
|---|---|---|
| 其鍵盤快速鍵與瀏覽器快速鍵重疊的延伸模組,例如使用 Ctrl+R 進行重新整理的 Git Graph。 | 該鍵盤快速鍵可能與現有的瀏覽器快速鍵重疊,例如 Ctrl+R 在 Safari 中會重新整理視窗。 | 您可以使用桌面版(而非網頁版)Codespaces 來充分利用您的鍵盤快速鍵。不同的瀏覽器也可能會有不同的運作方式(您可以在 Chrome 中重新整理 Git Graph)。 |
| 語言套件,例如 Visual Studio Code 日文語言套件 | 網頁版 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。 |
| Project Manager | Project Manager 依賴於同步自訂的 projects.json 檔案,而這項功能目前不支援。 |
您可以在桌面版 Codespaces 或本機 VS Code 中使用此延伸模組來儲存和管理您的專案,因為這些選項不需要同步自訂檔案。 |
| 依賴 Chrome 的延伸模組,例如 Protractor Test Runner 與 Browser Preview。 | Codespace 中未包含 Chrome。 | 請嘗試尋找替代體驗,或者您可以在本機 VS Code 中對專案使用這些延伸模組(未連線至 Codespaces)。 |
| Flutter(以及整體 Flutter 開發) | 由於 Docker 容器和 Codespaces 的性質,Flutter 工作流程的幾個層面受到限制。
|
您可以使用本機 VS Code 進行 Flutter 開發。 |
| LaTeX Workshop | 該延伸模組提供了三種功能來協助編寫 LaTeX:1) 顯示常用命令的一組檢視畫面,2) PDF 預覽器,以及 3) 程式碼片段和 IntelliSense 等語言功能。該延伸模組可以完整使用,但有一些網頁或安全性限制。 | 以下因應措施解決了檢視與預覽器功能區域中的限制
|
| Git Graph | 某些 Git Graph webview 功能在 Codespaces 中可能會受到限制。例如,在來自 commit 的檔案與 Git Graph webview 之間切換可能會使 webview 變空白。 | 您可以在 VS Code 桌面版中完整使用 Git Graph。 |
| 其他遠端開發延伸模組(WSL、Dev Containers、Remote - SSH)無法安裝在 Codespace 中。 | Codespace 本身就是一個遠端內容。 | 如果您想在其他遠端內容中執行(例如 WSL 或遠端 SSH 電腦),請開啟 VS Code 桌面版(未連線至 Codespace)並啟動其他遠端延伸模組之一。如果您想要使用自訂開發容器,您可以在 Codespaces 和 Dev Containers 中使用相同的 .devcontainer。 |
| My_Favorite_Extension 無法運作且未列在上方。 | 還有其他幾個問題可能會阻止功能在遠端內容中如預期般運作。 | 在某些情況下,您可以使用其他命令來因應此問題,但在其他情況下,可能需要修改延伸模組。請查看遠端延伸模組提示,以了解常見的遠端問題與解決這些問題的提示。 |
常見問題
為什麼有些延伸模組無法安裝在瀏覽器中
有少數延伸模組具有內建假設或需要在桌面版上執行。例如,延伸模組存取桌面版 VS Code 安裝中的檔案,或者延伸模組依賴必須在桌面環境中執行的可執行檔。當您嘗試在瀏覽器中安裝此類延伸模組時,系統會告知您該延伸模組無法使用。
注意:當從在桌面版上執行的 VS Code 連線至 Codespace 時,仍然可以使用此類延伸模組。
如何允許 VS Code 存取我的剪貼簿以進行讀取?
在某些情況下,當從剪貼簿讀取時,VS Code 可能會要求您授權存取剪貼簿。您應該能夠透過設定(搜尋「網站權限」)或在右側網址列中尋找此選項,來從瀏覽器授權存取剪貼簿

一旦您授權 VS Code 存取剪貼簿後,即可重試此作業。
如何允許 VS Code 始終開啟新分頁和新視窗?
作為一項安全預防措施,瀏覽器有時會封鎖 VS Code 開啟新分頁或新視窗。如果發生這種情況,VS Code 會偵測到封鎖動作並明確提示使用者。不過,您可以透過瀏覽器導覽列中的內容功能表開啟網站設定,並允許彈出視窗,來允許 VS Code 始終開啟新視窗和新分頁。

如何允許瀏覽器中的 VS Code 存取本機檔案和資料夾?
從瀏覽器在 VS Code 中開啟本機檔案和資料夾需要瀏覽器支援 File System Access API。目前 Microsoft Edge 和 Google Chrome 都提供此級別的支援。如果您想在使用瀏覽器版 VS Code 時存取本機檔案和資料夾,請考慮切換至這兩款瀏覽器之一。
問題或意見回饋
如果您有任何問題,可以參閱 GitHub Codespaces 疑難排解指南。如果您想提供意見反應,可以在 GitHub Codespaces 討論 (Discussions) 中提出問題。