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

Stella981
• 阅读 873

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

Eclipse 出品,1.3万 Star!网友说要干掉 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)实现,是用于开发成熟的、多语言的云计算和桌面类的理想产品。

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

在 docker 中运行

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

# Linux, macOS, 或者 PowerShell 的终端
docker run -it --init -p 3000:3000 -v "$(pwd):/home/project" theiaide/theia:next

# Windows (cmd.exe)
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,在该目录下执行上面的命令,我们来看看结果:

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

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

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

有没有很亲切的感觉?哈哈,是的,它跟 VS Code 几乎长得一模一样,不仅如此,它同样支持 VS Code 中的插件,所以你可以在 Theia 中尽情的“享用” VS Code 的插件市场。我们先来跑一个 helloworld 感受一下这个 IDE 的能力:

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

构建自己的 IDE

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

  1. 环境要求
  • Node.js 版本 >= 12.14.1 且 < 13
  • Yarn 版本 >= 1.7.0
  1. 创建项目

    mkdir my-theia cd my-theia

接着创建 package.json 文件:

{
  "name": "My Cool IDE",
  "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,我们会在构建与运行时用到它的一些命令。

  1. 安装依赖

    yarn

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

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

  1. 构建项目

    yarn theia build

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

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

  1. 运行 Theia IDE

直接运行

yarn theia start

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

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

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

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

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

  1. 封装 npm scripts

package.json 中添加:

{
  // ..... others
  "scripts": {
    "start": "theia start",
    "build": "theia build"
  }
}

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

  1. (进阶)安装插件

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

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

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

{
  // ... others
  "scripts": {
    "prepare": "yarn run clean && yarn build && yarn run download:plugins",
    "clean": "theia clean",
    "build": "theia build --mode development",
    "start": "theia start --plugins=local-dir:plugins",
    "download:plugins": "theia download: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,同时又添加了 theiaPluginsDirtheiaPlugins 这两个属性。theiaPluginsDir 是用来设置我们的插件存放地址的,theiaPlugins 就是我们要安装的插件了。运行项目之前,我们要先运行 yarn prepare 来准备环境,我们会在日志中看到插件的下载情况:

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

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

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

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

打包桌面应用

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

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

总结

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

开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库,包括:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
Eclipse插件开发_学习_00_资源帖
一、官方资料 1.eclipseapi(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhelp.eclipse.org%2Fmars%2Findex.jsp%3Ftopic%3D%252Forg.eclipse.platform.doc.isv%252Fguide%2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这