如何在瀏覽器中運行 VS Code？

摘要： WEB IDE新時代！

• 做者：SHUHARI 的博客
• 原文：有趣的項目 - 在瀏覽器中運行 Visual Studio Code

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，那麼在此基礎上添加必要的開發包之後，咱們不難據此建立一個標準鏡像，從而讓開發者擁有一個統1、標準化的開發環境，本地安裝、維護開發組件今後將不成爲問題。這應該是不少程序員和項目管理者所樂見的。此外，在運維、在線教學等領域也能夠發揮很大做用。

事實上，眼下已經有很多相似思路的 Web IDE，好比 AWS Cloud9， Eclipse Che，國內也有 Coding 的 WebIDE（目前彷佛是合併到了騰訊雲）等。和相似產品比較起來，VSCode 的主要優點應該是有着更好的社區和生態環境，於是使用前景也更爲廣闊。

固然咱們也看到，目前在瀏覽器中運行 VSCode 仍然存在一些有待解決的技術問題，所以還不適合普遍採用。但這已是一個不小的成就，在程序員社區中已經討論和研究多年的徹底在線開發，能夠說是又大大邁進了一步。

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了20億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對一、微脈、青團社等衆多品牌企業。歡迎你們免費試用！