国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

joyvw / 2717人閱讀

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

摘要: WEB IDE新時代!

作者:SHUHARI 的博客

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

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

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

本地運行服務

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

以下示例均基于 Coder 當前版本(1.691)。后續版本中可能會發生變化,因此如果運行有問題的話,建議參考 Coder 官網。

基于 Docker

假如你的機器已經安裝了 Docker 的話,那么該方式是最簡便的。由于DockerLinux 系統支持最佳,而 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、微脈、青團社等眾多品牌企業。歡迎大家免費試用!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106402.html

相關文章

  • [譯] 使用 VS Code 加速前端開發

    摘要:在對比我最近幾個月所用的開發工具后,我發現了一些驚人的東西。永遠不停止使用。將警告未使用的代碼。預檢查使用,,和非常有用。不再需要使用開啟服務器,創建應用程序,并打開瀏覽器。嘗試使用別的東西,立即出現錯誤。 原文:Supercharging Frontend Development with VS Code 作者:zachcodes 過去幾天,為了在開發 GraphQL / Rea...

    keithxiaoy 評論0 收藏0
  • VS Code插件開發介紹(一)

    摘要:發布插件插件開發完后就可以發布了,需要安裝安裝完后,需要去注冊并生成一個??偨Y本文介紹了插件開發的基本流程,實現了一個簡單的插件。更多的開發技巧,可以看這個系列的第二篇插件開發介紹二 前言 前段時間做了一個基于命令行的效率工具,可以自動生成組件的模板代碼。自己用起來還覺得挺好,但在組內案例幾次后大家都不愿意用,究其原因還是命令行工具使用起來門檻有點高,不方便。由于組內已經統一使用VS ...

    thursday 評論0 收藏0

發表評論

0條評論

joyvw

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<