关于ide:Eclipse-出品13万-Star网友说要干掉-VS-Code-的新工具

45次阅读

共计 3797 个字符，预计需要花费 10 分钟才能阅读完成。

【导语】：兴许大家最近在不少中央看到了一篇《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 等。

正文完
ide
发表至： ide
2021-02-01
 0
关于ide:Cloud-Studio-20云的开端
关于ide:139k-StarGo-和-Google-TensorFlow-实现的私人照片管理器
关于ide:12-亿次下载近-3-万-Star-的开源项目是为何会死掉
关于ide:54k-Star简单又全面的容器漏洞扫描工具Trivy