摘要： WEB IDE新時代！
Fundebug按照原文要求轉載，版權歸原作者所有。
眾所周知，Visual Studio Code 是基於 Electron 的，而Electron 又是一個“雙頭怪”——基於 Web 技術的桌面應用平臺。但在最近，Coder 的開發者最近做了有趣的嘗試，讓我們可以把整個 VSCode 放到瀏覽器中去執行，並且我們也可以很容易地去親身體驗他們的工作成果。如果你有興趣的話，不妨跟我一起嘗試一下。
本地執行服務
簡單地說，Coder 對 VSCode 進行了一些修改，以允許其作為可託管的 Web 服務來執行，該服務稱為 Code-Server。要在我們自己的機器上執行該服務，目前有兩種用法：基於 Docker 容器，或者自己下載執行服務程式。
以下示例均基於 Coder 當前版本（1.691）。後續版本中可能會發生變化，因此如果執行有問題的話，建議參考 Coder 官網。
基於 Docker
假如你的機器已經安裝了 Docker 的話，那麼該方式是最簡便的。由於Docker 對 Linux 系統支援最佳，而 Windows/MacOS 雖然也能執行但比較彆扭，所以以下示例均以 Ubuntu 為環境。執行容器只需要如下一行命令（你可以自行決定在什麼位置載入檔案卷）：
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 介面。對於國內環境，為提高網路速度，可考慮使用代理或國內的映象源。
自行下載執行程式
自己下載並執行的步驟要略微麻煩一些，如果不希望使用 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），請記住該資訊，以防後續輸出內容太多難以找到。在後面我們要用它來登入。
啟動後在瀏覽器中導航到 https://localhost:8443/。注意這裡和 Docker 的執行方式有一點不同，本地執行時是強制使用 https 的，但使用了 Coder 開發者證照，因此如果你看到瀏覽器提示證照問題的話，請選擇接受並繼續。接下來會提示你輸入控制檯顯示的密碼：
輸入密碼，等伺服器啟動完畢後會自動進入與 Docker 方式相同的介面。
這裡還有一點需要提醒。按照主流瀏覽器的安全策略，一旦你用 https 方式瀏覽了某個網站，那麼後續都會要求你繼續使用該方式，即使手動輸入 http 字首也會強制跳轉 https。因此，如果你先用本地方式啟動，再嘗試 Docker 的話就會遇到無法使用的問題（因為 Docker 方式並不支援 https）。這時清空一下瀏覽器快取再執行就可以了。
執行介面
無論使用哪種方式，啟動後在瀏覽器中都會看到熟悉的介面：
如果你嘗試使用一下會發現，這個 VSCode 在某種程度上是經過“魔改”的，和本地執行的 VSCode 在很多方面會有微妙的差別。比如，選單和標題欄都是在瀏覽器中繪製的，不像本地程式那樣使用系統 UI，而右上角的最小化/最大化/關閉按鈕也是沒用的。此外，開啟檔案/資料夾介面也是 Coder 團隊提供的網頁內建介面，不再是系統的檔案對話方塊：
當然，這種行為是可以理解的，因為網頁中無法直接呼叫作業系統 UI，因此相關功能都是 Coder 團隊修改後才能正常使用的。
如果你使用 Docker 執行方式的話，那麼你還會注意到其他一些不同。例如，從終端的顯示你會發現該命令是執行在容器中的，所以在終端中執行的結果在容器執行結束後也不會保留下來。如果你希望保留工作結果的話，那麼應當使用版本控制系統。
使用體驗
那麼，在瀏覽器中編輯的實際體驗如何呢？我嘗試著編輯並執行了一些程式（當然要安裝對應的編譯器）、修改並提交 Markdown 檔案，過程非常順暢，感覺和本地版的 VSCode 沒有什麼不同。
但是，至少在目前，Code-Server 存在一個重大問題：無法在 VSCode 中正常安裝各種外掛。我們都知道VSCode要想好用的話通常要安裝大量第三方外掛，這就使得該工具的使用受到了很大的限制。按照官方說明，這似乎是由於外掛安裝機制的一些內在限制，並且開發團隊也在努力解決該問題，相信再過一段時間我們會看到一個比較完善的解決方案。
使用場景
瀏覽器中執行的 VSCode 可以用來幹什麼呢？一個很容易想象到的場景是遠端/線上開發。既然我們已經可以從 Docker 容器中執行 VSCode，那麼在此基礎上新增必要的開發包以後，我們不難據此建立一個標準映象，從而讓開發者擁有一個統一、標準化的開發環境，本地安裝、維護開發元件從此將不成為問題。這應該是很多程式設計師和專案管理者所樂見的。此外，在運維、線上教學等領域也可以發揮很大作用。
事實上，眼下已經有不少類似思路的 Web IDE，比如 AWS Cloud9， Eclipse Che，國內也有 Coding 的 WebIDE（目前似乎是合併到了騰訊雲）等。和類似產品比較起來，VSCode 的主要優勢應該是有著更好的社群和生態環境，因而使用前景也更為廣闊。
當然我們也看到，目前在瀏覽器中執行 VSCode 仍然存在一些有待解決的技術問題，因此還不適合廣泛採用。但這已經是一個不小的成就，在程式設計師社群中已經討論和研究多年的完全線上開發，可以說是又大大邁進了一步。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了20億+錯誤事件，付費客戶有陽光保險、核桃程式設計、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家免費試用！