之前寫過一篇文章GitHub 裡面可以直接用 VS Code 了,真香!當時該功能還處于申請 Beta 權限階段,有朋友申請成功了,大鵬就趕緊去體驗了一下,體驗之後的感受就是:

1、建立環境
首先進入 GitHub 找到任意一個項目,有 Beta 權限的使用者點選 code 之後會發現多出來一個【Open with Codespaces】選項,Codespaces 就是 GitHub 雲端 VSCode 的産品名稱
點選後要進行下一步的選擇,如果你之前建立過該項目的編輯環境,則可以進行恢複,或者也可以選擇【New codespace】建立新環境,Beta 階段最多隻允許建立 2 個
環境選擇
選擇環境之後,就會開始進行初始化
初始化完成後就可以看到完整的開發環境了,整體布局和 VSCode 幾乎一模一樣,VSCode 可以使用的插件在這裡都能找到
2、開發伺服器概況
打開開發環境之後,相信大家和我一樣,會産生很多疑問,這會不會隻是個編輯器?編輯好了之後代碼又不能運作?搞這個意義大麼?
在這裡我要告訴大家:
不好意思,口型沒對好
基本資訊
- 硬碟空間:180GB
- CPU:2 核
- 記憶體:4GB
- 作業系統:Ubuntu
可以看到,整個開發伺服器的配置還是很給力的,開發一些小項目,是非常夠用的
開發環境
開發伺服器配置倒是還可以,但是開發環境什麼的還要自己安裝好麻煩
在這裡我要告訴大家:
常用的 node、python、java、go 這些語言全都有!
gcc、mvn、gradle 這些也都不在話下,都不用自己安裝直接用就行!
3、開發示例
說了這麼多,就看環境各種好了,真的能做開發麼,在這裡給大家一個完整的示例。
首先打開一個前端項目,直接執行
yarn
指令安裝開發包
安裝完成後執行
yarn start
指令啟動項目,下圖中可以看到啟動成功了
啟動成功
這時候遇到了一個問題,啟動成功了這個啟動位址是本地的
http://localhost:3000
,這也沒法通路呀。不慌,點選本地位址通路,這個時候就能看到真的有頁面!
通路
http://localhost:3000
之後會自動跳轉到 GitHub 提供的頁面網址
除此之外,在左側開發代碼的時候,右側也會自動更新變化,和本地開發的體驗完全一緻!
4、其他功能
除了和本地開發體驗一緻的之外,還可以看到更多的優勢
- 不需要自己配置 SSH 了,GitHub 直接幫你配置好了
- 本地 VSCode 編輯器的菜單欄進行了移動,更好的優化顯示空間
- Pull Request 和 Issue 的檢視非常友善,結合 GitHub Action 簡直爽歪歪
- 還有一個 Live Share 功能,使用這個可以一起看代碼程式設計
5、小結
【本地 IDE 已廢!編輯器大結局!】這句話并非完全的标題黨,GitHub 處于 Beta 階段的雲編輯器有相當多的優點!
- 用完即走,有網絡可以随時随地開發,不消耗本地資源
- 開發環境一應俱全,注冊個賬号就能直接線上寫代碼
- 結合 GitHub Actions 自動內建部署無痛點
- 結合 Issue、Projects、Wiki 和私有倉庫等功能,對于小團隊開發吸引力極強
VSCode 在本地開發編輯器中已經占據了半壁江山,如今 GitHub 的 Codespaces 則更上一層樓,期待該功能早日公測,給開發者更多選擇和優質的體驗