摘要：?jiǎn)?dòng)后在瀏覽器中導(dǎo)航到。這時(shí)清空一下瀏覽器緩存再運(yùn)行就可以了。當(dāng)然我們也看到，目前在瀏覽器中運(yùn)行仍然存在一些有待解決的技術(shù)問(wèn)題，因此還不適合廣泛采用。

摘要： WEB IDE新時(shí)代！

作者：SHUHARI 的博客

原文：有趣的項(xiàng)目 - 在瀏覽器中運(yùn)行 Visual Studio Code

Fundebug按照原文要求轉(zhuǎn)載，版權(quán)歸原作者所有。

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

簡(jiǎn)單地說(shuō)，Coder 對(duì) VSCode 進(jìn)行了一些修改，以允許其作為可托管的 Web 服務(wù)來(lái)運(yùn)行，該服務(wù)稱為 Code-Server。要在我們自己的機(jī)器上運(yùn)行該服務(wù)，目前有兩種用法：基于 Docker 容器，或者自己下載運(yùn)行服務(wù)程序。

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

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

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

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

自己下載并運(yùn)行的步驟要略微麻煩一些，如果不希望使用 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

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

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

輸入密碼，等服務(wù)器啟動(dòng)完畢后會(huì)自動(dòng)進(jìn)入與 Docker 方式相同的界面。

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

無(wú)論使用哪種方式，啟動(dòng)后在瀏覽器中都會(huì)看到熟悉的界面：

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

當(dāng)然，這種行為是可以理解的，因?yàn)榫W(wǎng)頁(yè)中無(wú)法直接調(diào)用操作系統(tǒng) UI，因此相關(guān)功能都是 Coder 團(tuán)隊(duì)修改后才能正常使用的。

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

那么，在瀏覽器中編輯的實(shí)際體驗(yàn)如何呢？我嘗試著編輯并運(yùn)行了一些程序（當(dāng)然要安裝對(duì)應(yīng)的編譯器）、修改并提交 Markdown 文件，過(guò)程非常順暢，感覺(jué)和本地版的 VSCode 沒(méi)有什么不同。

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

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

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

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

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