CPPXのXです。

twitterで流れてきたので、vimのGUI実装onivimを触ってみました。

jsで実装されており、割と簡単にプラグインが書けそうだったので、書いてみます。

ちゃんとした作り方かどうかはよく分からないです。
テンプレが公開されていたので、それを使ってやって行きたいと思います。

では目次です。

環境
プロジェクト作成
config.js
実行
おまけ
おわり

環境

node 11.3.0
yarn 1.12.3

プロジェクト作成

まず、リポジトリを作成します。
テンプレをforkしてきます。
名前は適当に変更してください。

次に、今forkしてきたものをcloneします。
clone場所は、~/.config/oni/plugins/です。
pluginsが無い場合は作成します。
では、中に入ってyarn installをしましょう。
まとめると、以下のようになります。

mkdir -p ~/.config/oni/plugins/
cd ~/.config/oni/plugins/
git clone <repository name>
cd <repository name>
yarn install

足りないものが何個かあったので、追加します。

yarn add typescript rxjs-compat

これで準備は完了です。

config.js

ちょこっと書き換えます。

nameとか、descriptionとかは好きに変更してください。

scriptsのtestの下に、以下を追加します。

"build": "tsc --build tsconfig.json"

こうなると思います。

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc --build tsconfig.json"
  },
...

実行

ひとまず、これで雛形は出来ました。

ビルドします。

yarn build

では、実行してみましょう。
onivimをリロードします。

リロードですが、f5キーとか、コマンドパレットから出来ます。
コマンドパレットだと、reloadと打てばokです。

hello worldとアラートが出たかと思います。
本体は、src/index.tsにあります

おまけ

markdown previewを参考に、コマンドを作成してみたいと思います。

src/index.tsを開きます

ここ(markdown preview)から一つクラスをパクります。
適当な場所に定義しておいてください。

class Command implements Oni.Commands.ICommand {
    constructor(
        public command: string,
        public name: string,
        public detail: string,
        public execute: Oni.Commands.CommandCallback,
    ) {}
}

alertの下あたりに、以下を書きます。

    oni.commands.registerCommand(new Command(
        "sample.hello",
        "Sample Command",
        "this is sample command",
        () => {
            alert("hello!!!!!")
        }
    ))

全体像は、こんな感じになると思います。

import * as React from "react"
import * as Oni from "oni-api"

// Activate is the 'entry point' for your plugin. This function
// is called when your plugin loads, with an Oni API object
// passed in.
// 
// Working with the Oni API is where all the interesting stuff happens!
export const activate = (oni: Oni.Plugin.Api): void => {
    

    // We'll create a simple status bar item
    alert("hello world")

    oni.commands.registerCommand(new Command(
        "sample.hello",
        "Sample Command",
        "this is sample command",
        () => {
            alert("hello!!!!!")
        }
    ))
}

class Command implements Oni.Commands.ICommand {
    constructor(
        public command: string,
        public name: string,
        public detail: string,
        public execute: Oni.Commands.CommandCallback,
    ) {}
}

ビルドします。

リロードします。

コマンドパレットを開いて、sample commandみたいな感じで打ち込みます。

hello!!!!!!!!!!!

ちゃんと動きましたかね。

引数について解説します。

command:
プログラム側から呼び出すときに、この名前で呼びます。

Oni.commands.executeCommand("sample.hello")

こんな感じです。

name:
コマンドパレットに表示されます。
コマンドを探すとき、nameとdetailを使って曖昧補完されます。

detail:
コマンドパレットに小さく表示されます。コマンドの説明文を書いておきましょう。

execute:
コマンドの中身です。

おわり

ひとまずこんな感じです。
今回自分が書いたものを載せておきます。

github.com

余談ですが、user configでsidebar.plugins.enabledをtrueにすると、plugin managerが有効になったりします。

多分まだ完成していないので、わくわくしながら見ておきます。

Hello Wor.log

IT系大学生4人による備忘録のようなもの

onivimのプラグインを作成する

環境

プロジェクト作成

config.js

実行

おまけ

おわり