使用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

　　 查看插件的typedoc文档。

VS Code代码实现

 　　Theia 提供VS Code API，可以查看这个链接的内容以获取当前的状态， 比较Theia和VS Vode API。

 

原文地址： https://theia-ide.org/docs/authoring_plugins