VS Code的替代品：Eclipse Theia [zt]
clq
浏览(318) -
2022-12-06 09:57:44 发表
编辑
关键字:
http://www.dg8.com.cn/news/23308.html
VS Code的替代品：Eclipse Theia
作者：电工吧 日期：2021-02-16 11:36:04 人气：327 栏目：市场动态
评论
分享
【导语】：也许大家最近在不少地方看到了一篇《Eclipse官宣，干掉VSCode》的文章。
9c2db84c-584b-11eb-8b86-12bb97331649.png
其实这又是在炒2020年3月的一则冷饭。Eclipse基金会官方就没说“干掉VSCode”，说的是“VSCode的一个真正开源替代品（aTrueOpenSourceAlternativetoVisualStudioCode）”。
本文就带大家认识一下这个VSCode的替代品：EclipseTheia。
Theia是一个基于TS开发的开源IDE框架，基于它我们可以开发出自己定制化的开发工具，它可以部署到云端使用，也可以打包成桌面应用。
Theia是什么？
EclipseTheia不是一个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启动TheiaIDE，它会使用你当前目录作为工作目录。其中，--init参数是用来避免死进程问题的。
假设此刻的目录为：/Users/jerry/workspace/testbox，在该目录下执行上面的命令，我们来看看结果：
9c8bd648-584b-11eb-8b86-12bb97331649.png
dockerruntheiaimage
通过日志我们可以看出，TheiaIDE已经成功启动并且监听3000端口了，我们打开浏览器看一下它的庐山真面目：
9cb365dc-584b-11eb-8b86-12bb97331649.png
resultofdockerruntheiaimage
有没有很亲切的感觉？
哈哈，是的，它跟VSCode几乎长得一模一样，不仅如此，它同样支持VSCode中的插件，所以你可以在Theia中尽情的“享用”VSCode的插件市场。
我们先来跑一个helloworld感受一下这个IDE的能力：
9d0abfd0-584b-11eb-8b86-12bb97331649.gif
usageofdockerruntheiaimage
构建自己的IDE
如果你不想使用docker，你完全可以自己构建一个TheiaIDE。接下来我们就基于Theia，在本地跑起来属于我们自己的IDE。
环境要求
Node.js版本>=12.14.1且< 13
Yarn版本>=1.7.0
创建项目
mkdirmy-theiacdmy-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
installtheiadeps
构建项目
yarntheiabuild
这个命令主要是用来生成项目代码的，包含源码，webpack配置文件以及webpack打包后的文件。运行成功的结果如下：
9d62ce96-584b-11eb-8b86-12bb97331649.png
theiabuild
运行TheiaIDE
直接运行
yarntheiastart
就能看到我们的IDE跑在了3000端口：
9d896ace-584b-11eb-8b86-12bb97331649.png
theiastart
我们打开http://localhost:3000看看：
9ddbf136-584b-11eb-8b86-12bb97331649.gif
usageoflocalruntheiaimage
也是与VSCode近乎一致的体验。
封装npmscripts
在package.json中添加：
{//.....others"scripts":{"start":"theiastart","build":"theiabuild"}}
以后我们就可以直接用yarnxxx的方式来执行了。至此，我们本地已经成功构建了一个IDE～
（进阶）安装插件
其实上一步我们已经有了一个IDE了，但是作为开发工具来说，那可能还差点意思。究竟差点什么呢？我们来写一些代码就知道了：
9e2ab262-584b-11eb-8b86-12bb97331649.png
theiawithoutplugins
是的，一目了然的结果，没有高亮，并且编码的过程中什么提示也没有，也就是相当于一个长得好看的记事本了。这完全不足以称之为一个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就是我们要安装的插件了。运行项目之前，我们要先运行yarnprepare来准备环境，我们会在日志中看到插件的下载情况：
9e4e120c-584b-11eb-8b86-12bb97331649.png
downloadplugins
这些插件都会放在当前目录下的plugins文件夹下。我们再来启动IDE看看效果，注意此时start带上了参数，指定了插件的目录：
9e74f0a2-584b-11eb-8b86-12bb97331649.png
theiawithplugins
可以看到，借助于插件，我们可以真正的使用这个IDE作为生产工具了。
打包桌面应用
这个相对来说就比较容易了，只有简单的几步，我们可以直接参考它的repo：https://github.com/theia-ide/yangster-electron
9ecbc1ac-584b-11eb-8b86-12bb97331649.png
总结
通过上面的例子，我们已经可以构建出一个属于自己的IDE了。如果你有自己的服务器，那么按照上面的步骤搭建一个CloudIDE，以后出门就不用背着电脑啦，一个平板，甚至一台手机就可以在线编程。
本帖子属于以下条目()
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
