在线观看www成人影院-在线观看www日本免费网站-在线观看www视频-在线观看操-欧美18在线-欧美1级

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

VS Code的替代品:Eclipse Theia

數據分析與開發 ? 來源:開源前哨 ? 作者:開源前哨 ? 2021-02-04 16:18 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

【導語】:也許大家最近在不少地方看到了一篇《Eclipse 官宣,干掉 VS Code》的文章。

其實這又是在炒 2020 年 3 月的一則冷飯。Eclipse 基金會官方就沒說“干掉 VS Code”,說的是“VS Code 的一個真正開源替代品(a True Open Source Alternative to Visual Studio Code)”。

本文就帶大家認識一下這個 VS Code 的替代品:Eclipse Theia。

Theia 是一個基于 TS 開發的開源 IDE框架,基于它我們可以開發出自己定制化的開發工具,它可以部署到云端使用,也可以打包成桌面應用。

Theia 是什么?

Eclipse Theia 不是一個 IDE,而是一個用來開發 IDE 的框架。它是一個可擴展的平臺,基于現代 Web 技術(TypeScript、CSS 和 HTML)實現,是用于開發成熟的、多語言的云計算和桌面類的理想產品。

9c51ac7a-584b-11eb-8b86-12bb97331649.jpg

在 docker 中運行

使用 docker 來啟動一個基于 Theia 的 IDE 是最簡單的了,你只需要確保你當前的系統中安裝了 docker 即可。我們可以直接使用它提供的鏡像theiaide/theia來啟動:

#Linux,macOS,或者PowerShell的終端 dockerrun-it--init-p3000:3000-v"$(pwd):/home/project"theiaide/theia:next #Windows(cmd.exe) dockerrun-it--init-p3000:3000-v"%cd%:/home/project"theiaide/theia:next

執行上面的命令后,會自動的去拉取theiaide/theia:next的鏡像并且在 http://localhost:3000啟動 Theia IDE,它會使用你當前目錄作為工作目錄。其中,--init參數是用來避免死進程問題的。

假設此刻的目錄為:/Users/jerry/workspace/testbox,在該目錄下執行上面的命令,我們來看看結果:

9c8bd648-584b-11eb-8b86-12bb97331649.png

docker run theia image

通過日志我們可以看出,Theia IDE 已經成功啟動并且監聽 3000 端口了,我們打開瀏覽器看一下它的廬山真面目:

9cb365dc-584b-11eb-8b86-12bb97331649.png

result of docker run theia image

有沒有很親切的感覺?

哈哈,是的,它跟 VS Code 幾乎長得一模一樣,不僅如此,它同樣支持 VS Code 中的插件,所以你可以在 Theia 中盡情的“享用” VS Code 的插件市場。

我們先來跑一個 helloworld 感受一下這個 IDE 的能力:

9d0abfd0-584b-11eb-8b86-12bb97331649.gif

usage of docker run theia image

構建自己的 IDE

如果你不想使用 docker,你完全可以自己構建一個 Theia IDE。接下來我們就基于 Theia,在本地跑起來屬于我們自己的 IDE。

環境要求

Node.js 版本 >= 12.14.1 且 < 13

Yarn 版本 >= 1.7.0

創建項目

mkdirmy-theia cdmy-theia

接著創建package.json文件:

{ "name":"MyCoolIDE", "dependencies":{ "@theia/callhierarchy":"next", "@theia/file-search":"next", "@theia/git":"next", "@theia/markers":"next", "@theia/messages":"next", "@theia/mini-browser":"next", "@theia/navigator":"next", "@theia/outline-view":"next", "@theia/plugin-ext-vscode":"next", "@theia/preferences":"next", "@theia/preview":"next", "@theia/search-in-workspace":"next", "@theia/terminal":"next" }, "devDependencies":{ "@theia/cli":"next" } }

通過 package.json 我們看到,其實 Theia 也是個 Node 的包。dependencies中有很多依賴,大致可以推測出,Theia 的功能是由這些包組合起來的,比如@theia/search-in-workspace負責搜索模塊,@theia/terminal負責終端模塊等;另外,@theia/cli作為devDependencies,我們會在構建與運行時用到它的一些命令。

安裝依賴

yarn

如果下載依賴緩慢,建議切換鏡像源地址。安裝成功的結果應該如下:

9d281c10-584b-11eb-8b86-12bb97331649.png

install theia deps

構建項目

yarntheiabuild

這個命令主要是用來生成項目代碼的,包含源碼,webpack 配置文件以及 webpack 打包后的文件。運行成功的結果如下:

9d62ce96-584b-11eb-8b86-12bb97331649.png

theia build

運行 Theia IDE

直接運行

yarntheiastart

就能看到我們的 IDE 跑在了 3000 端口:

9d896ace-584b-11eb-8b86-12bb97331649.png

theia start

我們打開http://localhost:3000看看:

9ddbf136-584b-11eb-8b86-12bb97331649.gif

usage of local run theia image

也是與 VSCode 近乎一致的體驗。

封裝 npm scripts

在package.json中添加:

{ //.....others "scripts":{ "start":"theiastart", "build":"theiabuild" } }

以后我們就可以直接用yarn xxx的方式來執行了。至此,我們本地已經成功構建了一個 IDE ~

(進階)安裝插件

其實上一步我們已經有了一個 IDE 了,但是作為開發工具來說,那可能還差點意思。究竟差點什么呢?我們來寫一些代碼就知道了:

9e2ab262-584b-11eb-8b86-12bb97331649.png

theia without plugins

是的,一目了然的結果,沒有高亮,并且編碼的過程中什么提示也沒有,也就是相當于一個長得好看的記事本了。這完全不足以稱之為一個 IDE,下面我們就來安裝這些插件,使我們的 IDE 強大起來。此時,我們需要更新一下package.json:

{ //...others "scripts":{ "prepare":"yarnrunclean&&yarnbuild&&yarnrundownload:plugins", "clean":"theiaclean", "build":"theiabuild--modedevelopment", "start":"theiastart--plugins=local-dir:plugins", "download:plugins":"theiadownload:plugins" }, "theiaPluginsDir":"plugins", "theiaPlugins":{ "vscode-builtin-css":"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix", "vscode-builtin-html":"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix", "vscode-builtin-javascript":"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix", "vscode-builtin-json":"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix", "vscode-builtin-markdown":"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix" } }

我們更新了scripts,同時又添加了theiaPluginsDir和theiaPlugins這兩個屬性。theiaPluginsDir是用來設置我們的插件存放地址的,theiaPlugins就是我們要安裝的插件了。運行項目之前,我們要先運行yarn prepare來準備環境,我們會在日志中看到插件的下載情況:

9e4e120c-584b-11eb-8b86-12bb97331649.png

download plugins

這些插件都會放在當前目錄下的plugins文件夾下。我們再來啟動 IDE 看看效果,注意此時 start 帶上了參數,指定了插件的目錄:

9e74f0a2-584b-11eb-8b86-12bb97331649.png

theia with plugins

可以看到,借助于插件,我們可以真正的使用這個 IDE 作為生產工具了。

打包桌面應用

這個相對來說就比較容易了,只有簡單的幾步,我們可以直接參考它的 repo:https://github.com/theia-ide/yangster-electron

總結

通過上面的例子,我們已經可以構建出一個屬于自己的 IDE 了。如果你有自己的服務器,那么按照上面的步驟搭建一個 Cloud IDE,以后出門就不用背著電腦啦,一個平板,甚至一臺手機就可以在線編程

責任編輯:lq

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 云計算
    +關注

    關注

    39

    文章

    7974

    瀏覽量

    139759
  • 開源
    +關注

    關注

    3

    文章

    3654

    瀏覽量

    43714

原文標題:Eclipse 出品,1.3 萬 Star!網友說要干掉 VS Code 的新工具

文章出處:【微信號:DBDevs,微信公眾號:數據分析與開發】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關推薦
    熱點推薦

    如何在VS Code中使用瑞薩RA系列MCU

    VS Code(Visual Studio Code)是微軟公司出品,它是一個免費且多功能的代碼編輯器,幾乎支持所有主要的編程語言和框架。特別是最近又新加了Github Copilot功能,讓用戶
    的頭像 發表于 04-16 14:02 ?2731次閱讀
    如何在<b class='flag-5'>VS</b> <b class='flag-5'>Code</b>中使用瑞薩RA系列MCU

    請問有沒有關于SN74HC1G14的替代品

    請問有沒有關于SN74HC1G14的替代品?要求驅動能力大些,最好是能夠達到輸出電流30mA這樣的芯片?謝謝
    發表于 02-14 08:38

    使用MCUXpresso for VS Code插件開發Zephyr的hello world

    本期來到Zephyr實戰經驗演練,小編帶著大家一起使用MCUXpresso for VS Code插件來開發一個屬于Zephyr的hello world。
    的頭像 發表于 01-03 09:21 ?1220次閱讀
    使用MCUXpresso for <b class='flag-5'>VS</b> <b class='flag-5'>Code</b>插件開發Zephyr的hello world

    超級電容是電池的替代品,你認同嗎?

    超級電容作為一種新型的儲能器件,因其能量密度高、快速充電和放電速度、使用時間長、電容量大等特點,被認為是電池的一種替代品。但在高能量需求和長期保持能量場景下,超級電容仍無法替代電池。
    的頭像 發表于 12-31 15:00 ?1072次閱讀
    超級電容是電池的<b class='flag-5'>替代品</b>,你認同嗎?

    Zephyr領進門系列:MCUXPresso for VS Code插件安裝

    在上一期-Zephyr的構建工具,我們為大家介紹了一位新朋友,Zephyr OS。相信通過上一篇的介紹,大家已經對這一OS有了一些簡單的了解。那么本期小編將帶著大家一起從0開始結合VS Code搭建
    的頭像 發表于 12-19 09:53 ?1972次閱讀
    Zephyr領進門系列:MCUXPresso for <b class='flag-5'>VS</b> <b class='flag-5'>Code</b>插件安裝

    ?IAR C-SPY為VS Code社區樹立調試新標準

    全球領先的嵌入式系統開發軟件解決方案供應商IAR宣布,對VS Code中的調試擴展IAR C-SPY調試器進行了重大升級。此次升級引入了IAR的Listwindow技術,進一步提升了調試能力,使IAR C-SPY調試器在VS
    的頭像 發表于 12-06 10:27 ?667次閱讀

    愛普生停產產品/替代品

    產品名稱啟動(計劃)最后購買(計劃)最后裝運(計劃)推薦替代方案原因EG-2121CAJun/2026EndofJun/2027EndofDec/2027SG70
    的頭像 發表于 10-11 11:09 ?999次閱讀
    愛普生停產產品/<b class='flag-5'>替代品</b>

    變阻器的未來發展趨勢和前景如何?是否有替代品出現?

    變阻器作為一種重要的電子元件,其未來發展趨勢和前景是多元化、智能化、節能環保和多功能化的。雖然可能存在替代品的出現,但滑動變阻器仍然具有廣泛的應用領域和穩定的市場需求。隨著科技的不斷發展,滑動變阻器將繼續發揮其重要作用,并在電子領域中不斷創新和發展。
    發表于 10-10 14:35

    汽車應用中有刷DC電機驅動的繼電器替代品

    電子發燒友網站提供《汽車應用中有刷DC電機驅動的繼電器替代品.pdf》資料免費下載
    發表于 09-30 10:29 ?1次下載
    汽車應用中有刷DC電機驅動的繼電器<b class='flag-5'>替代品</b>

    FCB-CV7520一體化機芯的卓越升級替代品——索尼FCB-EV9520L

    在影像技術領域,索尼再次以其卓越的創新實力,推出了FCB-EV9520L一體化機芯,作為凱茉銳FCB-CV7520的升級替代品,這款新品在多個方面實現了顯著的突破與提升。
    的頭像 發表于 09-26 11:07 ?585次閱讀
    FCB-CV7520一體化機芯的卓越升級<b class='flag-5'>替代品</b>——索尼FCB-EV9520L

    tlc4502的替代品有哪些?

    由于設計需要,要使用tlc4502的dip8封裝的芯片,在網上沒有找到tlc402dip8的芯片,賣家說是軍品,下我想咨詢一下,可以在ti的運放找一個替代的,我查了tlc272可以嗎?謝謝。或者其他的運放,dip8的與402的管腳一致的。
    發表于 09-25 06:34

    如何考慮將TI Smart DAC作為555定時器的替代品

    電子發燒友網站提供《如何考慮將TI Smart DAC作為555定時器的替代品.pdf》資料免費下載
    發表于 09-14 11:12 ?1次下載
    如何考慮將TI Smart DAC作為555定時器的<b class='flag-5'>替代品</b>

    LM3080N的替代品有哪些?

    有這個芯片LM3080N的替代品沒? 幫人詢問呢。謝謝。
    發表于 09-14 08:46

    請問什么型號的放大器可以替代ISO100AP呢?

    您好!由于ISO100AP已停產,所以現在需要找到一款合適的替代品。請問什么型號的放大器可以替代ISO100AP呢?請麻煩推薦一款!謝謝!
    發表于 09-14 08:29

    Microchip發布面向VS Code的MPLAB擴展早期體驗版本

    為充分利用Microsoft Visual Studio Code (VS Code) 的多功能性,Microchip Technology(微芯科技公司)發布面向VS
    的頭像 發表于 08-28 10:01 ?1141次閱讀
    主站蜘蛛池模板: 神马午夜在线观看 | 精品你懂的 | 成年免费大片黄在线观看免费 | 四虎影院在线播放 | 亚洲狠狠色丁香婷婷综合 | 2017天天天天做夜夜夜做 | 国产成人啪午夜精品网站 | 99久久国产综合精品国 | 狠狠色综合久久婷婷 | 毛片在线播放网站 | 乱小说录目伦200篇将曲勒 | 免费观看国产网址你懂的 | 天天翘夜夜洗澡天天做 | 电影天堂bt | 午夜想想爱午夜剧场 | 五月婷婷丁香在线观看 | 日本黄色大片在线播放视频免费观看 | 男女视频在线观看免费 | 六月综合网 | 四虎必出精品亚洲高清 | 四虎影院官网 | 美女在线看永久免费网址 | 特污兔午夜影院 | 亚洲1卡二卡3卡四卡不卡 | 天天色天天舔 | 亚洲欧美一区二区三区在线播放 | 日韩一级在线播放免费观看 | 福利观看 | 九九热在线视频观看 | 亚洲黄色色图 | 一级日本高清视频免费观看 | 亚洲精品卡1卡二卡3卡四卡 | 国产日本三级 | 免费的黄色的视频 | 欧美精品video | 日韩成人在线影院 | 一级做a爱片就在线看 | 天天噜天天干 | 亚洲一区二区在线 | 日韩综合nv一区二区在线观看 | 免费观看影院 |