使用Theia--は、プラグインを作成します

プラグインを作成Theia

　　私たちは、プラグインTheiaを作成する方法を見てみましょう。例として、私たちは、「Hello World」の通知を表示するHello Worldのコマンドを、登録されます。この記事では、すべての必要な手順をガイドします。

Theiaアーキテクチャ

プラグインや拡張パッケージ

　　Theiaは、拡張可能なIDEです。あなたは拡張子はIDEをカスタマイズする方法です聞いたことがあるかもしれないが、それは、プラグインがTheiaの新しい拡張性モデルに追加することができます。ここではプラグインや拡張機能パッケージの主な違いについていくつかの情報があります。

プラグ

　　利点：

コード分離：別のプロセスでプラグインを実行するためのコードは、Theiaコアプロセスをブロックしません。
これは、実行時にロードすることができます。あなたは全体Theia IDEを再コンパイルする必要はありません。
コンパイル時間を短縮します。
自己完結型。プラグインは、別のファイルにパッケージ化し、後で直接ロードすることができます。それはnpmjsまたは他の場所から追加の依存関係を取得する必要はありません。
シンプルなAPI

inversifyまたは任意の他のフレームワークを学ぶことなく。
コード補完を持つ単一の入り口には、可能な通話関連JSDocのを確認してください。

APIは下位互換性があるので、別のTheia 1つのバージョンからアップグレードすることは容易です。

　　短所：

事前に定義されたAPIに準拠する必要があります。APIを介して無拠出ポイントならば、機能を調整することはできません。現在のAPIは、より多くの機能をサポートするように拡張することができることに注意してください。

デザイン

　　Theiaアプリケーションは、ウィジェットのセット、および特定の機能のためのコマンド処理プログラムを提供するコア成分、から成ります。

　　Theiaは、カスタムプラグインのIDEを可能にし、その特徴は、様々な場所Theiaアプリケーションに追加のランタイムAPIを定義します。

　　Theiaでは、プラグインAPIは、オブジェクトは、プラグインの全てに利用可能であるtheia指定されたオブジェクトを介してアクセスすることができます。APIの詳細については見ることができ、ここで。

　　プラグインの2つのプロパティを持っています：

バックエンドプラグイン。バックエンドプラグインやVSコードのようなプラグイン。コードは、サーバー側プラグイン自分の別のプロセスで実行されています。APIが呼び出されると、それはように新しいコマンドを登録するには、ユーザーのブラウザやUI上のいくつかのアクションを送り、かつます。すべてのコールバックは、サーバーの独自のプロセスで実行されています。
フロントエンドプラグ。すべてのコールバックは、この場合には、ブラウザまたはUIスレッドの作業で実行されています。これらのプラグインは、唯一の「ブラウザの互換性」モジュールを使用することができます。すべてのプラグインがブラウザで実行されているので、例えば、ファイルを読み書きすることはできません。あなたが本当にクライアントが特定のネットワーク運用を避けたい場合はしかし、その後、この方法が便利です。

必要条件

　　実行中のインスタンスTheia、（v0.3.12 +）があるTheia倉庫 Theiaの手順については。

プロジェクト構造

　　私たちは、という名前のディレクトリを作成 theia-ハローワールド-プラグインの我々のプロジェクトのソースコードを格納するために使用される新しいディレクトリを、。

　　新しいディレクトリは、任意のパスに作成することができ、それはTheiaのソースコードとは無関係です。

　　倉庫のセットアップを簡素化するためには、使用することができますヨーマンコードジェネレータをすぐに助け足場にプロジェクトを生成します。

　　インストールおよび発電機に次のコマンドを実行することができます。あなたは新しいターミナル実行Theiaインスタンスにこれらのコマンドを入力することもできます。

NPM インストール -gよ@ theia / generator- プラグイン
 ます。mkdir theia-ハロー世界的プラグイン
CD theia -hello、世界的プラグイン
@theiaよ /プラグイン

　　上記のコマンドで：

-gインストールNPMよ@ theia /ジェネレータ -plugin コマンドジェネレータは、グローバルTheiaをマウント。
ヨーヨー@ theia /プラグインコマンドは、テンプレートTheiaプラグインジェネレータを作成するヨーマン・ジェネレータを起動します。

　　以下はダイナミックマップ生成動作です。

　　デフォルトのオプションを使用して各質問。

　　このステップでは、 Theia-こんにちは、世界-プラグインのディレクトリがすでにソースコードからビルドされたプラグインを持っています。

プラグインの実現

　　我々は、自動生成されたコードを見てください。

{
       "名"： "theia-ハローワールド・プラグイン" 、
       "出版社"： "theia" 、
       "キーワード" ：[
         "theia-プラグイン"
      ]、
      "バージョン"： "0.0.1" 、
       "ファイル" ：[
         "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文件中，有三个重要的部分：

首先，在 devDependencies中，有一个依赖项 @theia/plugin，这个包将在插件的代码中调用Theia API（如添加新命令和显示消息）。
第二， engines部分包含 theiaPlugin，它允许将node包标记为可在特定版本的Theia上运行。
第三， 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