1.3 万 Star!网友说要干掉 VS Code 的新工具

新闻 前端
也许大家最近在不少地方看到了一篇《Eclipse 官宣,干掉 VS Code》的文章。

  【导语】:也许大家最近在不少地方看到了一篇《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)实现,是用于开发成熟的、多语言的云计算和桌面类的理想产品。

在 docker 中运行

使用 docker 来启动一个基于 Theia 的 IDE 是最简单的了,你只需要确保你当前的系统中安装了 docker 即可。我们可以直接使用它提供的镜像 theiaide/theia 来启动:

  1. # Linux, macOS, 或者 PowerShell 的终端 
  2.  
  3. docker run -it --init -p 3000:3000 -v "$(pwd):/home/project" theiaide/theia:next 
  4.  
  5. # Windows (cmd.exe) 
  6.  
  7. docker run -it --init -p 3000:3000 -v "%cd%:/home/project" theiaide/theia:next 

执行上面的命令后,会自动的去拉取 theiaide/theia:next 的镜像并且在 http://localhost:3000 启动 Theia IDE,它会使用你当前目录作为工作目录。其中,--init 参数是用来避免死进程问题的。

假设此刻的目录为:/Users/jerry/workspace/testbox,在该目录下执行上面的命令,我们来看看结果:

docker run theia image

通过日志我们可以看出,Theia IDE 已经成功启动并且监听 3000 端口了,我们打开浏览器看一下它的庐山真面目:

result of docker run theia image

有没有很亲切的感觉?

哈哈,是的,它跟 VS Code 几乎长得一模一样,不仅如此,它同样支持 VS Code 中的插件,所以你可以在 Theia 中尽情的“享用” VS Code 的插件市场。

我们先来跑一个 helloworld 感受一下这个 IDE 的能力:

usage of docker run theia image

构建自己的 IDE

如果你不想使用 docker,你完全可以自己构建一个 Theia IDE。接下来我们就基于 Theia,在本地跑起来属于我们自己的 IDE。

1. 环境要求

  • Node.js 版本 >= 12.14.1 且 < 13
  • Yarn 版本 >= 1.7.0

2. 创建项目

  1. mkdir my-theia 
  2.  
  3. cd my-theia 

接着创建 package.json 文件:

  1.  
  2. "name""My Cool IDE"
  3.  
  4. "dependencies": { 
  5.  
  6. "@theia/callhierarchy""next"
  7.  
  8. "@theia/file-search""next"
  9.  
  10. "@theia/git""next"
  11.  
  12. "@theia/markers""next"
  13.  
  14. "@theia/messages""next"
  15.  
  16. "@theia/mini-browser""next"
  17.  
  18. "@theia/navigator""next"
  19.  
  20. "@theia/outline-view""next"
  21.  
  22. "@theia/plugin-ext-vscode""next"
  23.  
  24. "@theia/preferences""next"
  25.  
  26. "@theia/preview""next"
  27.  
  28. "@theia/search-in-workspace""next"
  29.  
  30. "@theia/terminal""next" 
  31.  
  32. }, 
  33.  
  34. "devDependencies": { 
  35.  
  36. "@theia/cli""next" 
  37.  
  38.  

通过 package.json 我们看到,其实 Theia 也是个 Node 的包。dependencies 中有很多依赖,大致可以推测出,Theia 的功能是由这些包组合起来的,比如@theia/search-in-workspace 负责搜索模块,@theia/terminal 负责终端模块等;另外,@theia/cli 作为 devDependencies,我们会在构建与运行时用到它的一些命令。

3. 安装依赖

  1. yarn 

如果下载依赖缓慢,建议切换镜像源地址。安装成功的结果应该如下:

install theia deps

  • 构建项目
  1. yarn theia build 

这个命令主要是用来生成项目代码的,包含源码,webpack 配置文件以及 webpack 打包后的文件。运行成功的结果如下:

theia build

  • 运行 Theia IDE

直接运行

  1. yarn theia start 

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

theia start

我们打开 http://localhost:3000 看看:

usage of local run theia image

也是与 VSCode 近乎一致的体验。

  • 封装 npm scripts

在 package.json 中添加:

  1.  
  2. // ..... others 
  3.  
  4. "scripts": { 
  5.  
  6. "start""theia start"
  7.  
  8. "build""theia build" 
  9.  
  10.  

以后我们就可以直接用 yarn xxx 的方式来执行了。至此,我们本地已经成功构建了一个 IDE ~

  • (进阶)安装插件

其实上一步我们已经有了一个 IDE 了,但是作为开发工具来说,那可能还差点意思。究竟差点什么呢?我们来写一些代码就知道了:

theia without plugins

是的,一目了然的结果,没有高亮,并且编码的过程中什么提示也没有,也就是相当于一个长得好看的记事本了。这完全不足以称之为一个 IDE,下面我们就来安装这些插件,使我们的 IDE 强大起来。此时,我们需要更新一下 package.json :

  1.  
  2. // ... others 
  3.  
  4. "scripts": { 
  5.  
  6. "prepare""yarn run clean && yarn build && yarn run download:plugins"
  7.  
  8. "clean""theia clean"
  9.  
  10. "build""theia build --mode development"
  11.  
  12. "start""theia start --plugins=local-dir:plugins"
  13.  
  14. "download:plugins""theia download:plugins" 
  15.  
  16. }, 
  17.  
  18. "theiaPluginsDir""plugins"
  19.  
  20. "theiaPlugins": { 
  21.  
  22. "vscode-builtin-css""https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix"
  23.  
  24. "vscode-builtin-html""https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix"
  25.  
  26. "vscode-builtin-javascript""https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix"
  27.  
  28. "vscode-builtin-json""https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix"
  29.  
  30. "vscode-builtin-markdown""https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix" 
  31.  
  32.  

我们更新了 scripts,同时又添加了 theiaPluginsDir 和 theiaPlugins 这两个属性。theiaPluginsDir 是用来设置我们的插件存放地址的,theiaPlugins 就是我们要安装的插件了。运行项目之前,我们要先运行 yarn prepare 来准备环境,我们会在日志中看到插件的下载情况:

download plugins

这些插件都会放在当前目录下的 plugins 文件夹下。我们再来启动 IDE 看看效果,注意此时 start 带上了参数,指定了插件的目录:

theia with plugins

可以看到,借助于插件,我们可以真正的使用这个 IDE 作为生产工具了。

打包桌面应用

这个相对来说就比较容易了,只有简单的几步,我们可以直接参考它的 repo:https://github.com/theia-ide/yangster-electron

总结

通过上面的例子,我们已经可以构建出一个属于自己的 IDE 了。如果你有自己的服务器,那么按照上面的步骤搭建一个 Cloud IDE,以后出门就不用背着电脑啦,一个平板,甚至一台手机就可以在线编程。

 

 

责任编辑:张燕妮 来源: 开源前哨
相关推荐

2020-12-25 14:55:13

VS Code代码编程

2021-06-18 12:16:16

工具编辑器开发

2023-08-21 14:08:05

AI代码神器Clude

2020-02-27 08:59:11

DebugCode开源工具

2021-04-14 15:15:46

开源技术 工具

2020-01-10 08:57:39

工具代码开发

2021-04-20 08:02:08

业务数据用户

2019-12-09 08:00:00

GraphQLAPI架构

2023-04-18 10:03:51

AI英伟达

2022-09-30 13:09:32

VSLookVS Code工具

2019-03-14 09:18:19

5GWiFi4G

2021-05-17 10:44:24

Python 工具编程语言

2022-06-06 12:18:44

配置可视化Nginx

2021-02-05 09:18:33

VS CodeVim操作

2019-06-27 14:30:22

VSCodium开源VS Code

2011-03-01 16:08:46

2022-06-15 09:48:05

VS CodeVS Codium开源

2018-05-07 10:53:46

飞致云Jumpserver混合IT

2009-09-14 10:01:35

EGLJavaScriptIBM

2020-02-21 13:22:58

开发者技能工具
点赞
收藏

51CTO技术栈公众号