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