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