摘要：啟動后在瀏覽器中導航到。這時清空一下瀏覽器緩存再運行就可以了。當然我們也看到，目前在瀏覽器中運行仍然存在一些有待解決的技術問題，因此還不適合廣泛采用。

摘要： WEB IDE新時代！

作者：SHUHARI 的博客

原文：有趣的項目 - 在瀏覽器中運行 Visual Studio Code

Fundebug按照原文要求轉載，版權歸原作者所有。

眾所周知，Visual Studio Code 是基于 Electron 的，而Electron 又是一個“雙頭怪”——基于 Web 技術的桌面應用平臺。但在最近，Coder 的開發(fā)者最近做了有趣的嘗試，讓我們可以把整個 VSCode 放到瀏覽器中去運行，并且我們也可以很容易地去親身體驗他們的工作成果。如果你有興趣的話，不妨跟我一起嘗試一下。

簡單地說，Coder 對 VSCode 進行了一些修改，以允許其作為可托管的 Web 服務來運行，該服務稱為 Code-Server。要在我們自己的機器上運行該服務，目前有兩種用法：基于 Docker 容器，或者自己下載運行服務程序。

以下示例均基于 Coder 當前版本（1.691）。后續(xù)版本中可能會發(fā)生變化，因此如果運行有問題的話，建議參考 Coder 官網(wǎng)。

假如你的機器已經(jīng)安裝了 Docker 的話，那么該方式是最簡便的。由于Docker 對 Linux 系統(tǒng)支持最佳，而 Windows/MacOS 雖然也能運行但比較別扭，所以以下示例均以 Ubuntu 為環(huán)境。運行容器只需要如下一行命令（你可以自行決定在什么位置加載文件卷）：

docker run -it -p 127.0.0.1:8443:8443 
    -v "${PWD}:${PWD}" 
    codercom/code-server:1.621 
    --allow-http 
    --no-auth

等待 Docker 完成容器下載和啟動后，在瀏覽器中打開 http://localhost:8443 即可看到 VSCode 界面。對于國內(nèi)環(huán)境，為提高網(wǎng)絡速度，可考慮使用代理或國內(nèi)的鏡像源。

自己下載并運行的步驟要略微麻煩一些，如果不希望使用 Docker 的話，可參考如下命令：

wget https://github.com/codercom/code-server/releases/download/1.691-vsc1.33.0/code-server1.691-vsc1.33.0-linux-x64.tar.gz
tar zxf code-server1.691-vsc1.33.0-linux-x64.tar.gz
cd code-server1.691-vsc1.33.0-linux-x64
./code-server -d $HOME --port 8443

這時控制臺將輸出服務器啟動的日志信息，其中包含服務器的啟動密碼（Password），請記住該信息，以防后續(xù)輸出內(nèi)容太多難以找到。在后面我們要用它來登錄。

啟動后在瀏覽器中導航到 https://localhost:8443/。注意這里和 Docker 的運行方式有一點不同，本地運行時是強制使用 https 的，但使用了 Coder 開發(fā)者證書，因此如果你看到瀏覽器提示證書問題的話，請選擇接受并繼續(xù)。接下來會提示你輸入控制臺顯示的密碼：

輸入密碼，等服務器啟動完畢后會自動進入與 Docker 方式相同的界面。

這里還有一點需要提醒。按照主流瀏覽器的安全策略，一旦你用 https 方式瀏覽了某個網(wǎng)站，那么后續(xù)都會要求你繼續(xù)使用該方式，即使手動輸入 http 前綴也會強制跳轉 https。因此，如果你先用本地方式啟動，再嘗試 Docker 的話就會遇到無法使用的問題（因為 Docker 方式并不支持 https）。這時清空一下瀏覽器緩存再運行就可以了。

無論使用哪種方式，啟動后在瀏覽器中都會看到熟悉的界面：

如果你嘗試使用一下會發(fā)現(xiàn)，這個 VSCode 在某種程度上是經(jīng)過“魔改”的，和本地運行的 VSCode 在很多方面會有微妙的差別。比如，菜單和標題欄都是在瀏覽器中繪制的，不像本地程序那樣使用系統(tǒng) UI，而右上角的最小化/最大化/關閉按鈕也是沒用的。此外，打開文件/文件夾界面也是 Coder 團隊提供的網(wǎng)頁內(nèi)置界面，不再是系統(tǒng)的文件對話框：

當然，這種行為是可以理解的，因為網(wǎng)頁中無法直接調(diào)用操作系統(tǒng) UI，因此相關功能都是 Coder 團隊修改后才能正常使用的。

如果你使用 Docker 運行方式的話，那么你還會注意到其他一些不同。例如，從終端的顯示你會發(fā)現(xiàn)該命令是運行在容器中的，所以在終端中執(zhí)行的結果在容器運行結束后也不會保留下來。如果你希望保留工作結果的話，那么應當使用版本控制系統(tǒng)。

那么，在瀏覽器中編輯的實際體驗如何呢？我嘗試著編輯并運行了一些程序（當然要安裝對應的編譯器）、修改并提交 Markdown 文件，過程非常順暢，感覺和本地版的 VSCode 沒有什么不同。

但是，至少在目前，Code-Server 存在一個重大問題：無法在 VSCode 中正常安裝各種插件。我們都知道VSCode要想好用的話通常要安裝大量第三方插件，這就使得該工具的使用受到了很大的限制。按照官方說明，這似乎是由于插件安裝機制的一些內(nèi)在限制，并且開發(fā)團隊也在努力解決該問題，相信再過一段時間我們會看到一個比較完善的解決方案。

瀏覽器中運行的 VSCode 可以用來干什么呢？一個很容易想象到的場景是遠程/在線開發(fā)。既然我們已經(jīng)可以從 Docker 容器中運行 VSCode，那么在此基礎上添加必要的開發(fā)包以后，我們不難據(jù)此創(chuàng)建一個標準鏡像，從而讓開發(fā)者擁有一個統(tǒng)一、標準化的開發(fā)環(huán)境，本地安裝、維護開發(fā)組件從此將不成為問題。這應該是很多程序員和項目管理者所樂見的。此外，在運維、在線教學等領域也可以發(fā)揮很大作用。

事實上，眼下已經(jīng)有不少類似思路的 Web IDE，比如 AWS Cloud9， Eclipse Che，國內(nèi)也有 Coding 的 WebIDE（目前似乎是合并到了騰訊云）等。和類似產(chǎn)品比較起來，VSCode 的主要優(yōu)勢應該是有著更好的社區(qū)和生態(tài)環(huán)境，因而使用前景也更為廣闊。

當然我們也看到，目前在瀏覽器中運行 VSCode 仍然存在一些有待解決的技術問題，因此還不適合廣泛采用。但這已經(jīng)是一個不小的成就，在程序員社區(qū)中已經(jīng)討論和研究多年的完全在線開發(fā)，可以說是又大大邁進了一步。

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了20億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業(yè)。歡迎大家免費試用！