使用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可以进行扩展以支持更多的功能。

设计

• 后端插件。后端插件与VS Code的插件很像。插件的代码运行在服务端自己独立的进程中。当API被调用时，它会在用户的浏览器或UI上发送一些actions来注册新命令，等等。所有的回调都在服务端专有的进程中运行。
• 前端插件。这种情况下所有的回调都在浏览器或UI的工作线程中运行。这些插件只被授权使用“浏览器兼容”模块。例如，不允许读写文件，因为所有的插件都运行在浏览器端。但是，如果你确实希望在客户端避免某些网络操作，那么这种方法是有用的。

必要条件

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

项目结构

npm install -g yo @theia/generator-plugin
mkdir theia-hello-world-plugin
cd theia-hello-world-plugin
yo @theia/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
      }
}

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() {

}