Eclipse 出品，1.3万 Star！网友说要干掉 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 来启动：

# 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，在该目录下执行上面的命令，咱们来看看结果：

经过日志咱们能够看出，Theia IDE 已经成功启动而且监听 3000 端口了，咱们打开浏览器看一下它的庐山真面目：

有没有很亲切的感受？哈哈，是的，它跟 VS Code 几乎长得如出一辙，不只如此，它一样支持 VS Code 中的插件，因此你能够在 Theia 中尽情的“享用” VS Code 的插件市场。咱们先来跑一个 helloworld 感觉一下这个 IDE 的能力：

构建本身的 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

若是下载依赖缓慢，建议切换镜像源地址。安装成功的结果应该以下：

1. 构建项目

yarn theia build

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

1. 运行 Theia IDE

直接运行

yarn theia start

就能看到咱们的 IDE 跑在了 3000 端口：

咱们打开 http://localhost:3000 看看：

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

1. 封装 npm scripts

在 package.json 中添加：

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

之后咱们就能够直接用 yarn xxx 的方式来执行了。至此，咱们本地已经成功构建了一个 IDE ～

1. （进阶）安装插件

其实上一步咱们已经有了一个 IDE 了，可是做为开发工具来讲，那可能还差点意思。究竟差点什么呢？咱们来写一些代码就知道了：

是的，一目了然的结果，没有高亮，而且编码的过程当中什么提示也没有，也就是至关于一个长得好看的记事本了。这彻底不足以称之为一个 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，同时又添加了 theiaPluginsDir 和 theiaPlugins 这两个属性。theiaPluginsDir 是用来设置咱们的插件存放地址的，theiaPlugins 就是咱们要安装的插件了。运行项目以前，咱们要先运行 yarn prepare 来准备环境，咱们会在日志中看到插件的下载状况：

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

能够看到，借助于插件，咱们能够真正的使用这个 IDE 做为生产工具了。

打包桌面应用

这个相对来讲就比较容易了，只有简单的几步，咱们能够直接参考它的 repo：
https://github.com/theia-ide/...

总结

经过上面的例子，咱们已经能够构建出一个属于本身的 IDE 了。若是你有本身的服务器，那么按照上面的步骤搭建一个 Cloud IDE，之后出门就不用背着电脑啦，一个平板，甚至一台手机就能够在线编程。

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