使用Theia——创建插件

上一篇:使用Theia——创建扩展包

创建Theia插件

  下面我们来看看如何创建Theia插件。作为示例,我们将注册一个Hello World命令,该命令显示一个“Hello World”通知。本文将指导你完成所有必要的步骤。

Theia的架构

插件与扩展包

  Theia是一个可扩展的IDE。你可能听说过扩展是定制IDE的一种方式,而插件则是一种可以被添加到Theia中的新的可扩展模型。下面是一些有关插件和扩展包之间的主要区别。

插件

  优点:

  • 代码隔离:插件的代码运行在独立的进程中,它不会阻塞Theia核心进程。
  • 可以在运行时加载。不需要重新编译整个Theia IDE。
  • 减少编译时间。
  • 自包含。插件可以被打包成一个独立的文件,并在稍后直接加载。它不需要从npmjs或者其它的地方获取额外的依赖项。
  • 简单的API
  • 不需要学习inversify或任何其它的框架。
  • 单个入口,带有代码补全,以查看可能的与JsDoc相关的调用。
  • 由于API是向后兼容的,所以很方便从一个Theia版本升级到另一个版本。

  缺点:

  • 需要遵守预定义的API。如果没有通过API提供contribution point,则不可能对功能进行调整。注意当前的API可以进行扩展以支持更多的功能。

设计

  Theia应用程序由一个核心组成,它为特定功能提供一组小部件、命令和处理程序等。
  Theia定义了一个运行时的API,它允许插件定制IDE并将它们的功能添加到Theia应用程序的各个地方。
  在Theia中,插件可以通过一个名为theia的对象访问API,该对象在所有的插件中都可用。有关API的更多细节可以查看这里
  插件有两种性质:
  • 后端插件。后端插件与VS Code的插件很像。插件的代码运行在服务端自己独立的进程中。当API被调用时,它会在用户的浏览器或UI上发送一些actions来注册新命令,等等。所有的回调都在服务端专有的进程中运行。
  • 前端插件。这种情况下所有的回调都在浏览器或UI的工作线程中运行。这些插件只被授权使用“浏览器兼容”模块。例如,不允许读写文件,因为所有的插件都运行在浏览器端。但是,如果你确实希望在客户端避免某些网络操作,那么这种方法是有用的。

必要条件

  这里有一个运行的Theia实例,(v0.3.12+)可以从Theia仓库获得Theia的说明。

项目结构

  我们创建了一个名为theia-hello-world-plugin的新目录,用来存放我们项目的源代码。
  这个新目录可以创建在任何路径下,它是独立于Theia源代码的。
  为了简化仓库的设置,你可以使用Yeoman代码生成器来帮助快速生成项目的脚手架。
  可以通过下面的命令来安装和运行生成器。注意,你可以在运行Theia实例的新终端中输入这些命令。
npm install -g yo @theia/generator-plugin
mkdir theia-hello-world-plugin
cd theia-hello-world-plugin
yo @theia/plugin

  在上面的命令中:

  • npm install -g yo @theia/generator-plugin命令在全局安装Theia生成器。
  • yo @theia/plugin命令调用yeoman生成器来创建Theia插件生成器的模板。

  下面是生成器运行的动态图。

  每个问题使用默认选项即可。

  在这一步中,theia-hello-world-plugin目录中已经有了一个从源码构建的插件了。

实现插件

  我们来看下自动生成的代码。
{
      "name": "theia-hello-world-plugin",
      "publisher": "theia",
      "keywords": [
        "theia-plugin"
      ],
      "version": "0.0.1",
      "files": [
        "src"
      ],
      "devDependencies": {
        "@theia/plugin": "latest", <-- 1. Theia API dependency
        "rimraf": "^2.6.2",
        "typescript": "^2.9.2"
      },
      "scripts": {
        "prepare": "yarn run clean && yarn run build",
        "clean": "rimraf lib",
        "build": "tsc"
      },
      "engines": {
        "theiaPlugin": "latest"  <-- 2. this plug-in requires Theia runtime
      },
      "theiaPlugin": {
        "backend": "lib/theia-hello-world-plugin-backend-plugin.js" 3. <-- entrypoint
      }
}

  在这个package.json文件中,有三个重要的部分:

  1. 首先,在devDependencies中,有一个依赖项@theia/plugin,这个包将在插件的代码中调用Theia API(如添加新命令和显示消息)。
  2. 第二,engines部分包含theiaPlugin,它允许将node包标记为可在特定版本的Theia上运行。
  3. 第三,theiaPlugin部分包含插件的入口位置。对于后端插件,backend的值是指向插件的javascript的路径。
  我们来看下生成的单个源代码文件的内容。下面这个文件的路径是src/theia-hello-world-plugin-backend-plugin.ts,它包含TypeScript代码。
import * as theia from '@theia/plugin';

export function start() {
    const informationMessageTestCommand = {
        id: 'hello-world-example-generated',
        label: "Hello World"
    };
    theia.commands.registerCommand(informationMessageTestCommand, (...args: any[]) => {
        theia.window.showInformationMessage('Hello World!');
    });

}

export function stop() {

}
  可以看到,只需几行代码就可以注册一个命令并显示通知消息。
  第一行很重要,用来导入API。import * as theia from '@theia/plugin';将所有的Theia插件的API导入到一个theia对象中。
  代码中包含两个方法,start()stop()
  方法start()在插件被加载时调用。在这个方法中,有一个action,用来注册hello world命令和一个回调,以及显示hello world的消息。Command对象有一个id和一个用来在命令面板中显示的label
  方法stop()的内容为空,它在插件停止时被调用,用于执行某些操作。此方法是可选的,如果为空则可以将其删除。

运行插件

  现在我们来看看这个插件的运行情况。在Theia中有一种被称之为hosted mode的模式,该模式允许我们在其中一个Theia实例中开发插件,并将其部署到另一个Theia实例中。这样就可以很方便地生成插件并进行测试。
  首先,确保已经打开Theia中生成插件的目录(它必须是你workspace的一部分)。然后打开命令面板(F1键),搜索Hosted mode: start instance,选择该命令。
 
  浏览workspace并选择插件的目录(其中包含package.json文件)。
 
  这将在3030端口上启一个新的Theia实例。你会看到打开了一个新的选项卡(可能你需要验证一下),有一个新的实例在Development Host下运行(可以在状态栏中看到)。
 
  在Development Host实例中,打开命令面板(F1键)然后搜索Hello World命令。
 
  选择该命令,你将在屏幕上看到Hello World的消息。

开发插件

  正如上面所说的,Theia API由TypeScript提供,同时在开发过程中还支持代码补全功能和JsDoc。

更新插件

   假如你想将消息的内容从Hello World改成Hello Theia,可以进到Hosted Plugin: running实例中(看状态栏上的显示),编辑TypeScript文件src/theia-hello-world-plugin-backend-plugin.ts,将theia.window.showInformationMessage('Hello World!');改成theia.window.showInformationMessage('Hello Theia!');
  在插件的根目录下运行命令yarn build,重新编译源代码。然后你只需要刷新Development Host的实例,插件就会被重新加载。
  注意:你也可以使用watch模式来代替手动刷新。

插件的API

VS Code代码实现

   Theia 提供VS Code API,可以查看这个链接的内容以获取当前的状态,比较Theia和VS Vode API
 
posted @ 2020-01-06 22:38  Jaxu  阅读(2938)  评论(0编辑  收藏  举报