GitHub Codespaces
GitHub Codespaces 為任何活動提供雲驅動的開發環境——無論是長期專案,還是審查拉取請求等短期任務。您可以透過 Visual Studio Code 或在基於瀏覽器的編輯器中使用這些環境。
環境
環境是 GitHub Codespaces 的“後端”部分。所有與軟體開發相關的計算都在這裡進行:編譯、除錯、還原等。當您需要開始一個新專案、接手一項新任務或審查 PR 時,您只需啟動一個雲託管的環境,GitHub Codespaces 就會負責正確配置它。它會自動配置您專案所需的一切:原始碼、執行時、編譯器、偵錯程式、編輯器、自定義點檔案配置、相關的編輯器擴充套件等等。
自定義
GitHub Codespaces 可以基於每個專案進行完全自定義。這是透過在專案倉庫中包含一個 devcontainer.json
檔案來實現的,類似於 VS Code 開發容器開發。
自定義示例包括
- 設定要使用的基於 Linux 的作業系統。
- 自動安裝各種工具、執行時和框架。
- 轉發常用埠。
- 設定環境變數。
- 配置編輯器設定並安裝偏好的擴充套件。
請參閱 配置 Codespaces 文件,瞭解特定於 codespace 的 devcontainer.json
設定。
每個使用者的點檔案配置
點檔案(Dotfiles)是檔名以點(.)開頭的檔案。它們通常包含應用程式的配置資訊,可以控制終端、編輯器、原始碼管理以及各種其他工具的行為。.bashrc
、.gitignore
和 .editorconfig
是開發者常用的點檔案示例。
在建立 codespace 時,您可以指定一個包含您的點檔案的 GitHub 倉庫、檔案的目標位置以及安裝命令。
請參閱 個性化 Codespaces 文件,瞭解如何將您的點檔案配置新增到 codespace 中。
入門
我們為兩種 GitHub Codespaces 客戶端都準備了入門主題。這些主題將引導您快速登入 GitHub Codespaces、建立您的第一個 codespace,並使用您偏好的客戶端連線到它。
- VS Code 中的 Codespaces - 使用 GitHub Codespaces 擴充套件連線並在您的環境中工作。
- 瀏覽器中的 Codespaces - 透過基於瀏覽器的編輯器連線到您的 codespace。
擴充套件開發者
VS Code 擴充套件 API 隱藏了遠端執行的大部分實現細節,因此許多擴充套件無需任何修改即可在 GitHub Codespaces 環境中正常工作。但是,我們建議您在 codespace 中測試您的擴充套件,以確保其所有功能都按預期工作。有關詳細資訊,請參閱關於支援遠端開發和 GitHub Codespaces 的文章。
基於瀏覽器的編輯器
您還可以在瀏覽器中獲得免費、輕量級的 Visual Studio Code 體驗。基於 Web 的編輯器讓您可以安全、快速地瀏覽 GitHub 上的原始碼倉庫,並進行輕量級的程式碼更改。您可以在編輯器中開啟任何倉庫、分支或拉取請求,它擁有 VS Code 的許多功能,包括搜尋和語法高亮。如果您想執行或除錯程式碼,可以切換到雲託管環境或 VS Code 桌面版。
要訪問此基於瀏覽器的編輯器,您可以前往您在 github.com 上的倉庫,然後按 .(句號鍵),或者將您倉庫的 URL 從 github.com/org/repo
更改為 github.dev/org/repo
,即用 github.dev
替換 github.com
。
限制:如果您在瀏覽器的無痕模式下執行或啟用了廣告攔截器,則可能無法使用基於 Web 的編輯器。
注意:此編輯器目前處於技術預覽階段。您今天就可以試用,並在 https://github.co/browser-editor-feedback 提供反饋。
已知限制和調整
在使用 Codespaces,尤其是在 Web 端的 VS Code 時,需要注意一些限制。其中一些限制有變通方法或調整,以提供一致的開發體驗。
對於一些問題(特別是鍵盤快捷鍵或那些列出了桌面版變通方法的問題),您可以將 Codespace 安裝並用作漸進式 Web 應用(PWA)。
問題 | 原因 | 變通方法 |
---|---|---|
在 Firefox 中,Ctrl+Shift+P 無法啟動命令面板。 | Ctrl+Shift+P 在 Firefox 中已被預留。 | 使用 F1 啟動命令面板。 |
某些預設的鍵盤快捷鍵(用於除錯)在 Web 端有所不同。 | 由於瀏覽器可能已經為這些鍵盤快捷鍵註冊了操作,我們調整了 VS Code 在 Web 端的預設設定。 | 使用調整後的預設值。它們會出現在除錯操作的工具提示懸停中。
|
用於除錯的 F11 在 macOS 的 Web 端或桌面版中均無法工作。 | 這是一個已知的、非瀏覽器特定的限制。更多資訊可以在 問題 #5102 中找到。 | 在 macOS 上停用 F11 顯示桌面的功能。
|
Ctrl+N 用於新建檔案在 Web 端無效。 | Ctrl+N 會開啟一個新視窗。 | Ctrl+N 用於新建檔案在桌面版中有效。 |
Ctrl+W 用於關閉編輯器在 Web 端無效。 | Ctrl+W 在瀏覽器中會關閉當前標籤頁。 | Ctrl+W 在桌面版中有效。 |
Ctrl+Shift+B 不會切換瀏覽器的收藏夾欄。 | Codespaces 會覆蓋此快捷鍵並重定向到命令面板中的“生成”選單。 | 當前沒有變通方法。 |
從 VS Code 拖放檔案到 Codespace(反之亦然)無效。 | 您可以在 問題 #115535 中檢視更多背景資訊。 | 有幾種選擇:
|
在 Web 端不支援 Angular 應用除錯。 | 出於安全原因,在瀏覽器中執行的程式碼無法以除錯模式啟動另一個瀏覽器例項。 | 您有幾個選擇:
|
從瀏覽器下載沒有副檔名的檔案會自動新增“.txt” | 這是 Chrome 和 Edge 的行為。 | 相關背景和未來潛在解決方案在 問題 #118436 中。 |
當您從遠端(包括 Codespaces)下載檔案時,諸如可執行位之類的屬性會被移除。 | 相關背景和未來潛在解決方案可以在 問題 #112099 中找到。 | 當前沒有變通方法。 |
當嘗試從 Codespace 下載某些資料夾時,您可能會看到提示:“您的codespace名稱 無法開啟此資料夾,因為它包含系統檔案”。 |
使用者代理可以自由地對敏感目錄施加限制級別。更多資訊請參見此規範和 Chromium 的黑名單。 | 除了規範和黑名單之外,沒有其他變通方法。 |
手動訪問 https://:forwarded_port 無法從 Web 端的 Codespace 訪問轉發的埠。 |
這是基於 Codespaces 處理埠轉發併為 Web 生成正確 URL 的方式。 | 單擊埠轉發通知中的連結以開啟您的應用,或單擊埠檢視中的地球圖示,兩者都將提供正確生成的連結。更多資訊請參見 Codespaces 文件。 |
一些擴充套件在 Web 端的行為不同
擴充套件 | 問題 / 原因 | 變通方法 |
---|---|---|
鍵盤快捷鍵與瀏覽器快捷鍵重疊的擴充套件,例如 Git Graph,它使用 Ctrl+R 進行重新整理。 | 鍵盤快捷鍵可能與現有的瀏覽器快捷鍵重疊,例如 Ctrl+R 在 Safari 中會重新整理視窗。 | 您可以使用基於桌面的 Codespace 而不是基於 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。 |
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 這樣的語言功能。該擴充套件可以相當全面地使用,但存在一些 Web 或安全限制。 | 以下變通方法解決了檢視和預覽器功能區域的限制:
|
Git Graph | 某些 Git Graph Webview 功能在 Codespaces 中可能會受限。例如,在提交的檔案和 Git Graph Webview 之間切換可能會使 Webview 變為空白。 | 您可以在 VS Code 桌面版中完整使用 Git Graph。 |
其他遠端開發擴充套件(WSL, Dev Containers, Remote - SSH)無法在 Codespace 中安裝。 | Codespace 本身已經是一個遠端上下文。 | 如果您想在另一個遠端上下文(例如 WSL 或遠端 SSH 計算機)中執行,請開啟 VS Code 桌面版(未連線到 Codespace)並啟動其他遠端擴充套件之一。如果您想使用自定義開發容器,您可以在 Codespaces 和 Dev Containers 中使用相同的 .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。目前,Microsoft Edge 和 Google Chrome 都提供了這種級別的支援。如果您想在瀏覽器中使用 VS Code 時訪問本地檔案和資料夾,請考慮切換到這兩種瀏覽器之一。
問題或反饋
如果您有任何問題,可以查閱 GitHub Codespaces 故障排除指南。如果您想提供反饋,可以在 GitHub Codespaces 討論區中提交問題。