GitHub Codespaces
GitHub Codespaces 提供雲端驅動的開發環境,適用於任何活動——無論是長期專案,還是像檢閱提取要求 (Pull Request) 這樣的短期任務。您可以從 Visual Studio Code 或網頁版編輯器中使用這些環境。

環境
環境是 GitHub Codespaces 的「後端」部分。它是所有與軟體開發相關的運算發生的地方:編譯、偵錯、還原等。當您需要處理新專案、接手新任務或檢閱 PR 時,只需啟動一個雲端代管環境,GitHub Codespaces 就會負責正確配置它。它會自動配置您專案所需的一切:原始碼、執行環境、編譯器、偵錯器、編輯器、自訂 dotfile 配置、相關的編輯器擴充功能等等。
自訂
GitHub Codespaces 完全可針對每個專案進行自訂。這是透過在專案的儲存庫中包含 devcontainer.json 檔案來實現的,類似於 VS Code 開發容器 (Dev Containers) 的開發方式。
自訂範例包括:
- 設定要使用的 Linux 作業系統。
- 自動安裝各種工具、執行環境與框架。
- 轉發常用連接埠。
- 設定環境變數。
- 配置編輯器設定並安裝偏好的擴充功能。
請參閱 設定 Codespaces 說明文件以了解 codespace 特有的 devcontainer.json 設定。
每個使用者的 Dotfile 配置
Dotfiles 是檔名以點 (.) 開頭的檔案。它們通常包含應用程式的配置資訊,並可控制終端機、編輯器、原始碼控制以及其他各種工具的行為。.bashrc、.gitignore 和 .editorconfig 是開發人員常用的 dotfiles 範例。
您可以在建立 codespace 時,指定包含您的 dotfiles 的 GitHub 儲存庫、檔案的目標位置以及安裝命令。
請參閱 個人化 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) 或提取要求 (pull request),它擁有 VS Code 的許多功能,包括搜尋和語法高亮。如果您想執行或偵錯程式碼,可以切換到雲端代管環境或 VS Code 桌面版。
要存取此網頁版編輯器,您可以前往 github.com 上的儲存庫並按下 . (句號鍵),或將儲存庫的 URL 更改為 github.dev/org/repo (將 github.com 替換為 github.dev)。
限制:如果您在瀏覽器中使用無痕模式或啟用了廣告攔截器,可能無法使用網頁版編輯器。
注意:此編輯器目前處於技術預覽階段。您現在就可以試用並在 https://github.co/browser-editor-feedback 提供意見回饋。
已知限制與調整
在處理 Codespaces (特別是網頁版 VS Code) 時,需要注意某些限制。其中一些限制已有對應的解決方法或調整措施,以提供一致的開發體驗。
對於某些問題 (特別是鍵盤快速鍵或列有桌面版替代方案的問題),您可以將 Codespace 安裝並作為 漸進式網頁應用程式 (PWA) 使用。

| 問題 | 原因 | 解決方法 |
|---|---|---|
| Ctrl+Shift+P 在 Firefox 中無法啟動指令面板。 | Ctrl+Shift+P 在 Firefox 中已被預留。 | 使用 F1 啟動指令面板。 |
| 某些預設鍵盤快速鍵 (用於偵錯) 在網頁版中有所不同。 | 由於瀏覽器可能已為這些快速鍵註冊了動作,因此我們調整了網頁版 VS Code 的預設值。 | 使用調整後的預設值。它們會顯示在偵錯動作的工具提示 (tooltip) 中。
|
| F11 偵錯在 macOS 的網頁版或桌面版中均無法使用。 | 這是已知的、非瀏覽器特定的限制。更多資訊請參閱 第 5102 號問題 (issue #5102)。 | 停用 macOS 的 F11 顯示桌面功能。
|
| Ctrl+N 新增檔案在網頁版中無效。 | Ctrl+N 會改為開啟新視窗。 | Ctrl+N 新增檔案在桌面版中有效。 |
| Ctrl+W 關閉編輯器在網頁版中無效。 | Ctrl+W 在瀏覽器中會關閉目前的分頁。 | Ctrl+W 在桌面版中有效。 |
| Ctrl+Shift+B 在瀏覽器中不會切換我的最愛列。 | Codespaces 會覆蓋此動作並將其重新導向至指令面板中的「建置 (Build)」選單。 | 目前無解決方法。 |
| 在 VS Code 與 Codespace 之間拖放檔案 (反之亦然) 無法運作。 | 您可以在 第 115535 號問題 中查看更多背景資訊。 | 有幾個選項:
|
| 網頁版不支援 Angular 應用程式偵錯。 | 出於安全原因,在瀏覽器中執行的程式碼無法在偵錯模式下啟動另一個瀏覽器實例。 | 您有幾個選項:
|
| 從瀏覽器下載沒有副檔名的檔案時會自動加上 ".txt" | 這是 Chrome 和 Edge 的行為方式。 | 背景資訊和潛在的未來解決方案請參閱 第 118436 號問題。 |
| 從遠端 (包括 Codespaces) 下載檔案時,可執行位元 (executable bit) 等屬性會被移除。 | 背景資訊和潛在的未來解決方案可以在 第 112099 號問題 中找到。 | 目前無解決方法。 |
嘗試從 Codespace 下載某些資料夾時,您可能會看到提示:「Your_codespace_name 無法開啟此資料夾,因為它包含系統檔案」。 |
使用者代理 (User agent) 可以自由地對敏感目錄施加限制。更多資訊請參閱 此規範 和 Chromium 的黑名單。 | 除了規範和黑名單之外,沒有額外的解決方法。 |
手動造訪 https://:forwarded_port 無法在網頁版 Codespace 中存取轉發的連接埠。 |
這是基於 Codespaces 處理連接埠轉發並為網頁生成正確 URL 的方式。 | 點擊連接埠轉發通知中的連結以開啟您的應用程式,或點擊 連接埠檢視表 中的地球圖示,這兩者都將提供正確生成的連結。更多資訊請參閱 Codespaces 說明文件。 |
某些擴充功能在網頁版中的行為有所不同
| 擴充功能 | 問題 / 原因 | 解決方法 |
|---|---|---|
| 具有與瀏覽器快速鍵重疊的鍵盤快速鍵的擴充功能,例如使用 Ctrl+R 重新整理的 Git Graph。 | 鍵盤快速鍵可能與現有的瀏覽器快速鍵重疊,例如 Ctrl+R 在 Safari 中會重新整理視窗。 | 您可以使用桌面版 (而非網頁版) 的 Codespace 來充分利用您的鍵盤快速鍵。不同的瀏覽器行為也可能不同 (您可以在 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 | 在 Codespaces 中,某些 Git Graph webview 功能可能會受限。例如,在提交 (commit) 的檔案與 Git Graph webview 之間切換可能會導致 webview 變白。 | 您可以在 VS Code 桌面版中完整使用 Git Graph。 |
| 其他 遠端開發擴充功能 (WSL、開發容器、遠端 - SSH) 無法安裝在 codespace 中。 | codespace 本身已經是遠端內容。 | 如果您想在另一個遠端內容 (例如 WSL 或遠端 SSH 電腦) 中執行,請開啟 VS Code 桌面版 (未連線到 codespace) 並啟動其他遠端擴充功能之一。如果您想使用 自訂開發容器,您可以在 Codespaces 和開發容器中都使用同一個 .devcontainer。 |
| **我最喜歡的擴充功能**無法運作且未列在上方。 | 還有一些其他問題可能會導致功能在遠端內容中無法如預期運作。 | 在某些情況下,您可以使用另一個指令來解決問題,但在其他情況下,可能需要修改擴充功能。請查看 遠端擴充功能祕訣 以了解常見的遠端問題及解決技巧。 |
常見問題
為什麼擴充功能無法在瀏覽器中安裝?
少數擴充功能具有內建假設或需要在桌面版執行。例如,擴充功能存取桌面版 VS Code 安裝中的檔案,或者擴充功能依賴於必須在桌面環境中執行的執行檔。當您嘗試在瀏覽器中安裝此類擴充功能時,系統會告知該擴充功能不可用。
注意:從桌面版 VS Code 連接到 Codespace 時,仍然可以使用此類擴充功能。
我該如何允許 VS Code 存取我的剪貼簿進行讀取?
在某些情況下,VS Code 可能會在從剪貼簿讀取時請求存取權限。您應該可以透過設定 (搜尋「網站權限」) 或在右側網址列中尋找此選項,來授予瀏覽器存取剪貼簿的權限。

授予 VS Code 存取剪貼簿的權限後,您可以重試該操作。
我該如何允許 VS Code 始終開啟新分頁和視窗?
瀏覽器有時會出於安全考量,阻止 VS Code 開啟新分頁或視窗。如果發生這種情況,VS Code 將偵測到封鎖動作並明確提示使用者。但是,您可以透過瀏覽器導覽列中的快顯功能表開啟網站設定,並允許 **彈出式視窗**,以允許 VS Code 始終開啟新視窗和分頁。

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