簡單開始使用Visual Studio Codespaces

Edward Kuo
Apr 26 · 8 min read
Image for post
Image for post

[此服務已經被微軟停用,改到GitHub]

Visual Studio Codespaces前生是Visual Studio Online

自從早年推出Visual Stuido Code以來,就在想說那天是否會推出線上版的Visual Studio,畢竟,如果有使用過Azure Web App服務內的一個功能叫做App Service 編輯器,其實,就已經算是很陽春版的線上編輯程式碼,但這並竟是從運行環境去編輯程式碼,感覺總有些怪怪的。不過,已經有這樣類似功能。果然,沒多久微軟就推出線上的Visual Studio Codespaces

Image for post
Image for post

很多人也會好奇,都已經有Visual Studio和Visual Studio Code,有人還會用Visual Studio Online嗎?確實是如此,如果,已經用慣Offline方式開發,其實要轉移到線上的誘因確實不是很大,再加上Visual Studio Codespaces可不是免費使用喔,還是必須有費用的,說穿了,就是背後還是啟動虛擬環境並把Visual Studio安裝在上面,只是透過Web方式可以進行編輯。

Image for post
Image for post

登入Visual Studio Codespaces

https://online.visualstudio.com/login登入,使用你的AAD作為登入帳號,進去後,一開始進去會是空白的,必須建立一個Bill Plan,來作為Visual Studio Online啟動環境的建置,不過不知道是不是還是預覽版關係,如果你有多個Subscription,分散在不同AAD,這邊卻無法進行切換到其他AAD的Subscription下面(這種情況因該也不多人有)

Image for post
Image for post

當Plan建置完畢後,可以到Azure內,就可以看到啟動一個叫做 Visual Studio Online Plan的服務

Image for post
Image for post

建置Visual Studio Online環境,有兩種,一種就是雲端VM建置(當然是還是要用你的Azure VM費用),另一種就是在自家環境的VM建置。這邊來建置一個雲端環境的版本。目前可選用的是屬於Linux環境的機器

Image for post
Image for post

輸入好相關資訊就可以開始建置了,當建置完畢後,一定發現一個非常好玩的現象如下圖,這不就是Visual Studio Code嗎?如果不管URL的話,根本無法知道是線上版本還是離線版本(其實左下角有顯示VS Online),以Visual Studio Code作為呈現編輯器也是合理,畢竟,Visual Studio Code是跨平台的,不然,在初始環境只能用Linux情況下,是不可能期望安裝一套Visual Studio版本開發工具

Image for post
Image for post

至於有沒有完全複製線下版的Visual Studio Code功能,我稍微用了一下,因該有70%差不多該有的基本上都有,不過,也因為它背後的VM是採用Linux Base,有些以Windows Base為主的指令,這邊就無法使用了

然後,原本的Visual Studio Codespaces可以看見你已經有建立一個開發環境

Image for post
Image for post

如果想要多個開發環境,只要依照需求多建立幾個就可以,當然,有一種情境在這邊使用下是滿不錯的方式,就是當我們在開發不同類型專案的時候,往往會安裝不同套件在開發工具上,有時候套件間會互相衝突,但礙於只有一台開發用的電腦,也不得不全部都裝進去,在這裡就可以依照開發專案不同建立不同環境,並選擇不同安裝套件。至少開發環境就會單純許多

開發一個小程式

在Visual Studio Codespaces中,因為使採用Linux,所以,預設的Terminal命令列是使用Bash,如果不習慣或是不喜歡使用,也可以安裝Powershell也是可以,只要到Extension找到Powershell進行安裝就好,這樣命令列就可以使用Powershall了

Image for post
Image for post

既然這邊是採用Visual Studio Core作為編輯器,可想而知,你是不能建立一個.NET Framework的專案了,一定只能建立.NET Core專案,所以,我們建立一個Console專案

dotnet new console

Image for post
Image for post

另外來看看建立過程的Output的資訊

Image for post
Image for post

用一個Console程式的結果

Image for post
Image for post

這部分體驗是跟線下版的開發基本上是相符,不過,這邊有一點不同的地方就是如何去Publish Project,因為畢竟是線上版本,Build與Publish的檔案都是被存在雲端伺服器上,除非是登入VM內,不然是無法直接取出使用。這也因此會希望搭配Azure DevOps Service進行版控與CI/CD方式來佈署檔案

剛剛是建立一個Console程式,如果是要建立一個ASP.NET Core呢?先建立一個ASP.NET Core的模板

Image for post
Image for post

然後,用dotnet run執行這個網站。這時候跟在跑線下版本所獲得資訊差不多,不過,有一點就不太相同,預設要看這網站會請你去瀏覽器的localhost:5000查看網站,但是在Online版本執行的網頁,當然也不可能用localhost:5000看得到。

Image for post
Image for post

因此,這邊必須透過Visual Studio Codespaces的一個Forwoarded Port機制去察看網頁

Image for post
Image for post

在這裡點擊Port:5000,就會自動導向另一個網址,這網址是由Visual Studio Online產生的。如果,今天你不是預設ASP.NET Core的5000作為Port,就必須要去上圖箭頭所指的地方去增加你自己修改的Port

Image for post
Image for post

至於,能不能這樣寫出Window Form的程式,這部分倒還沒有嘗試過。

不過,我想可能還在預覽版本關係,有時候要做forward port會不成功或是卡住,可能要多試幾次就可以

最後…

到底怎樣情境會想要使用Visual Studio Codespaces來做開發,就目前程式開發IDE並不缺乏狀況下,再加上本身Visual Studio Core也是免費版本。想要吸引來使用Visual Studio Online作為主力開發工具,因該很難,就企業來說Visual Studio Codespaces本身也是需要費用,以價格看來並不算便宜,再加上很多企業還在使用.NET Framework作為主要開發框架,也無法使用Visual Studio Codespaces。

Visual Studio Codespaces讓瀏覽器可以變成開發工具,算是一個很大的進步。而我目前認為它只能做為一個輔助型的開發,像是當你出差或是身邊真的沒有工作用的電腦可以開發,但又必須解決問題時候,這時候不太可能馬上安裝好Visual Studio,又或是必須用公用電腦時,透過Visual Studio Online作當下應急用的開發工具,是相當不錯,既不用安裝軟體,又不用擔心程式碼遺留在公用電腦上。當然了,如果開發專案太複雜,沒辦法在同一台電腦可以外掛太多套件,必須分開使用,那樣Online可以快速建立多個環境方式也算是不錯。

不過,就目前看來Visual Studio Codespaces要真正推廣應用還是有一段路要走。至少,大家要克服檔案原本可以從自己電腦搬移出來,用了Online就沒有辦法的行為模式

EK.Technology Learn

Design,Thinking,Coding & have fun every thing

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store