Github代碼空間服務初嘗——在線的VSCode

Github最近在內測一款新的祕密武器代碼空間服務，一種由Visual Studio Code支持的在線瀏覽器內集成開發環境。該服務可讓用戶快速加載虛擬機和完整的集成開發環境 (IDE)，用戶只需經過瀏覽器就進行代碼編輯和調試，支持對常見語言的調試。

代碼空間包括爲特定倉庫開發所需的一切，其中包括具備語法突出顯示和自動完成功能的文本編輯器、終端、調試工具和 Git 命令，全部這些都集成在 GitHub 中。也能夠在代碼空間中安裝 Visual Studio Code 擴展以添加更多功能。

使用Gitlab的同窗可能都用過Gitlab的WebIDE，Github代碼空間的使用相似於此，可是基於VSCode，體驗效果可能會更好。目前該服務屬於Beta內測階段，須要發出請求申請內測，通過審覈後才能嘗試。

初探

GitHub代碼空間和倉庫緊密相關，得到內測資格後，有關倉庫的右側項目概覽部分就有一個按鈕"Open with Codespaces"，打開該按鈕就能夠進行代碼編輯。無需任何額外配置，立刻便可在線工做。

也能夠經過Github頁面的頂部的頂級菜單Codespaces，打開代碼空間。

而後選擇要打開的具體項目：

加載代碼空間須要花費一點時間。GitHub代碼空間界面是典型的VSCode界面，左邊是活動欄，側邊欄、編輯欄，面板欄和狀態欄。

很明顯，是基於Visual Studio Code，仍是典型的暗模式。整個界面包瀏覽器指望的全部標準功能，例如語法突出顯示，ViM和Emac綁定(在瀏覽器中很好用)以及默認啓用的自動保存。

還能夠將文件從本地計算機拖放到Codespaces文件系統中，並在瀏覽器中預覽和編輯某些非文本文件，例如圖像，這兩個文件對於Web開發都是很是方便的。

終端模擬器

GitHub代碼空間包含一個功能強大的終端編輯器，該編輯器彷佛基於Debian鏡像。使用下拉列表而不是使用選項卡訪問單獨的終端。並且重要的，該終端下也能運行Docker。

可以在瀏覽器中簡單運行Docker很棒。默認狀況下未安裝Docker-compose，目前其工做模式咱們還不得而知，之後能夠了解下。

在終端仿真器中發現的惟一問題是，只能經過右鍵單擊將其粘貼到基於Chromium的瀏覽器(例如Chrome或Edge)，Firefox好像不行。

代碼轉發

端口轉發使咱們能夠訪問在代碼空間中運行的TCP端口。例如，若是在端口3000上運行Web應用程序，則能夠從瀏覽器訪問該應用程序以對其進行測試和調試。

Github代碼空間在處理端口轉發方面作得很出色，當代碼空間內運行的應用程序將端口輸出到控制檯時，代碼空間將檢測到localhost URL模式並自動轉發這些端口。能夠經過單擊終端中的URL，以在瀏覽器中將其打開。例如，若是應用程序輸出http://127.0.0.1:3000或輸出http://localhost:3000到控制檯，日誌將自動將輸出。若是GitHub檢測到localhost:PORT組合，就能夠經過單擊URL對其進行訪問，以下所示：

示例中的Jekyll加載和從新加載很快，當單擊轉發的連接或切換選項卡以預覽站點的更改時，它就會刷新站點。該功能僅支持Chromium的功能，在Firefox中好像也有問題。

• 能夠經過經過觸發命令面板(shift+command+P或者shift+control+P)並，輸入"Codespaces: Forward Port"來按需轉發端口。而後，能夠輸入要轉發的端口號。

• 也能夠經過.devcontainer.json文件中的forwardPorts屬性配置轉發的端口。

在"Remote Explorer遠程資源管理器"擴展中支持添加或刪除轉發的端口，並能夠複製並粘貼轉發端口的URL，能夠在瀏覽器中經過該Url訪問。

總結

這是一個很是棒的功能，能夠幫助那些不是很專門的開發人員進行在線開發。專業開發人員也能夠偶爾用來應急代碼調試，這樣就不須要時常揹着笨重的筆記本了。

另外GitHub代碼空間還有很其餘的功能包括協做工做區，Git集成以及與Visual Studio本地版本的鏈接。還須要你們一塊兒探索學習。

【編輯推薦】

1. 這個GitHub 1.4k星的Git魔法書火了丨有中文版

2. 谷歌超強Android UI工具包霸榜Github，這份上手指南瞭解一下

3. CertiK：Github用戶1400枚比特幣被盜事件分析

4. 2020年8月份Github上超級熱門的開源項目

5. Github上10個超好看 可視化面板，後臺管理頁面有着落了

【責任編輯：未麗燕 TEL：（010）68476606】