Github代碼空間服務(wù)之如何使用在線的VSCode

這篇文章主要講解了“Github代碼空間服務(wù)之如何使用在線的VSCode”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Github代碼空間服務(wù)之如何使用在線的VSCode”吧！

Github最近在內(nèi)測(cè)一款新的秘密武器代碼空間服務(wù)，一種由Visual Studio  Code支持的在線瀏覽器內(nèi)集成開(kāi)發(fā)環(huán)境。該服務(wù)可以讓用戶快速加載虛擬機(jī)和完整的集成開(kāi)發(fā)環(huán)境  (IDE)，用戶只需通過(guò)瀏覽器就進(jìn)行代碼編輯和調(diào)試，支持對(duì)常見(jiàn)語(yǔ)言的調(diào)試。

代碼空間包括為特定倉(cāng)庫(kù)開(kāi)發(fā)所需的一切，其中包括具有語(yǔ)法突出顯示和自動(dòng)完成功能的文本編輯器、終端、調(diào)試工具和 Git 命令，所有這些都集成在 GitHub  中。也可以在代碼空間中安裝 Visual Studio Code 擴(kuò)展以添加更多功能。

使用Gitlab的同學(xué)可能都用過(guò)Gitlab的WebIDE，Github代碼空間的使用類(lèi)似于此，但是基于VSCode，體驗(yàn)效果可能會(huì)更好。目前該服務(wù)屬于Beta內(nèi)測(cè)階段，需要發(fā)出請(qǐng)求申請(qǐng)內(nèi)測(cè)，經(jīng)過(guò)審核后才能?chē)L試。

初探

GitHub代碼空間和倉(cāng)庫(kù)緊密相關(guān)，獲得內(nèi)測(cè)資格后，有關(guān)倉(cāng)庫(kù)的右側(cè)項(xiàng)目概覽部分就有一個(gè)按鈕"Open with  Codespaces"，打開(kāi)該按鈕就可以進(jìn)行代碼編輯。無(wú)需任何額外配置，馬上即可在線工作。

也可以通過(guò)Github頁(yè)面的頂部的頂級(jí)菜單Codespaces，打開(kāi)代碼空間。

然后選擇要打開(kāi)的具體項(xiàng)目：

加載代碼空間需要花費(fèi)一點(diǎn)時(shí)間。GitHub代碼空間界面是典型的VSCode界面，左邊是活動(dòng)欄，側(cè)邊欄、編輯欄，面板欄和狀態(tài)欄。

很明顯，是基于Visual Studio  Code，還是典型的暗模式。整個(gè)界面包瀏覽器期望的所有標(biāo)準(zhǔn)功能，例如語(yǔ)法突出顯示，ViM和Emac綁定(在瀏覽器中很好用)以及默認(rèn)啟用的自動(dòng)保存。

還可以將文件從本地計(jì)算機(jī)拖放到Codespaces文件系統(tǒng)中，并在瀏覽器中預(yù)覽和編輯某些非文本文件，例如圖像，這兩個(gè)文件對(duì)于Web開(kāi)發(fā)都是非常方便的。

終端模擬器

GitHub代碼空間包含一個(gè)功能強(qiáng)大的終端編輯器，該編輯器似乎基于Debian鏡像。使用下拉列表而不是使用選項(xiàng)卡訪問(wèn)單獨(dú)的終端。而且重要的，該終端下也能運(yùn)行Docker。

能夠在瀏覽器中簡(jiǎn)單運(yùn)行Docker很棒。默認(rèn)情況下未安裝Docker-compose，目前其工作模式我們還不得而知，以后可以了解下。

在終端仿真器中發(fā)現(xiàn)的唯一問(wèn)題是，只能通過(guò)右鍵單擊將其粘貼到基于Chromium的瀏覽器(例如Chrome或Edge)，F(xiàn)irefox好像不行。

代碼轉(zhuǎn)發(fā)

端口轉(zhuǎn)發(fā)使我們可以訪問(wèn)在代碼空間中運(yùn)行的TCP端口。例如，如果在端口3000上運(yùn)行Web應(yīng)用程序，則可以從瀏覽器訪問(wèn)該應(yīng)用程序以對(duì)其進(jìn)行測(cè)試和調(diào)試。

Github代碼空間在處理端口轉(zhuǎn)發(fā)方面做得很出色，當(dāng)代碼空間內(nèi)運(yùn)行的應(yīng)用程序?qū)⒍丝谳敵龅娇刂婆_(tái)時(shí)，代碼空間將檢測(cè)到localhost  URL模式并自動(dòng)轉(zhuǎn)發(fā)這些端口?？梢酝ㄟ^(guò)單擊終端中的URL，以在瀏覽器中將其打開(kāi)。例如，如果應(yīng)用程序輸出http://127.0.0.1:3000或輸出http://localhost:3000到控制臺(tái)，日志將自動(dòng)將輸出。如果GitHub檢測(cè)到localhost:PORT組合，就可以通過(guò)單擊URL對(duì)其進(jìn)行訪問(wèn)，如下所示：

示例中的Jekyll加載和重新加載很快，當(dāng)單擊轉(zhuǎn)發(fā)的鏈接或切換選項(xiàng)卡以預(yù)覽站點(diǎn)的更改時(shí)，它就會(huì)刷新站點(diǎn)。該功能僅支持Chromium的功能，在Firefox中好像也有問(wèn)題。

• 可以通過(guò)通過(guò)觸發(fā)命令面板(shift+command+P或者shift+control+P)并，輸入"Codespaces: Forward  Port"來(lái)按需轉(zhuǎn)發(fā)端口。然后，可以輸入要轉(zhuǎn)發(fā)的端口號(hào)。

• 也可以通過(guò).devcontainer.json文件中的forwardPorts屬性配置轉(zhuǎn)發(fā)的端口。

在"Remote  Explorer遠(yuǎn)程資源管理器"擴(kuò)展中支持添加或刪除轉(zhuǎn)發(fā)的端口，并可以復(fù)制并粘貼轉(zhuǎn)發(fā)端口的URL，可以在瀏覽器中通過(guò)該Url訪問(wèn)。

感謝各位的閱讀，以上就是“Github代碼空間服務(wù)之如何使用在線的VSCode”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Github代碼空間服務(wù)之如何使用在線的VSCode這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！