Help us understand the problem. What is going on with this article?

NeovimでSwaggerをリアルタイムプレビューするプラグインを作った話

はじめに

Neovimと出会って約半年、今年こそ何かプラグインを作るぞ!ということで、Swaggerをリアルタイムでプレビューするプラグインを作成しました。
モチベーションは、単純にVimでSwaggerを書きたかった..ということです。

リポジトリ

インストール方法、使い方はこちらに記載しております。
shuntaka9576/preview-swagger.nvim

機能紹介

output-palette.gif

gif画像の通りで、:SwaggerPreviewコマンドを実行すると、ブラウザが開きます。
あとは、Neovim上でファイル編集を行うと、リアルタイムで内容が表示されます。

仕組み/技術

リモートプラグイン

Neovimには、プラグインをNeovim本体とは別のプロセスで起動し、msgpack-RPCを利用して機能拡張するリモートプラグインという仕組みがあります。
通常VimのプラグインはVimScriptを書く必要がありますが、リモートプラグインの仕組みを使うとコア部分はPython/Node.js/Go/Luaといった言語で書くことが出来ます。
msgpack-RPCに関しては、ラップされたライブラリが提供されているため意識せず書けました。

TypeScript

前述のリモートプラグインの仕組みを利用して、プラグインのコア部分はTypeScript(Node.js)で書いています。

Socket.IO

リアルタイムのWebアプリケーションを実現する方法は幾つかあり、Socket.IOはそれらをラップし全てのブラウザ・モバイルデバイスでリアルタイム通信を可能にするライブラリです。真新しいものではないです。

今回Neovimのバッファにあるのデータをフロントエンドに渡す部分で、Socket.IOを利用しています。
動作の流れは以下の通りです。

  1. (Neovim)カーソルが動く度にイベント発火、リモートプラグインをコール
  2. (リモートプラグイン)Socket.IOでデシリアライズしたバッファの内容を乗せてイベント発火
  3. (フロントエンド)イベントを受け取り、バッファ内容をSwaggerUIで表示

参考にしたOSS

iamcco/markdown-preview.nvim
マークダウンのリアルタイムプレビューだけでなく、カーソルの操作を元に自動でブラウザのスクロールをしてくれます。
Socket.IOの仕組み諸々とても参考にさせて頂きました。
フロントエンドはNext.jsを使われており、フロント経験のない私には分からなかったです..

最後に

初めてのプラグイン開発で感じたことは、当然ですがVimの基礎知識がないと辛いということです。
開発する前にVim scriptテクニックバイブルを見て軽く手を動かして良かったです。
Vimmerが一つ踏み込んでプラグインを開発する際に、丁度良い本でした。

フロント側は知識がなくやっつけなので、なんとかしたいと思っています!

勿論issue報告やプルリクエストがあれば大歓迎です。

以上、preview-swagger.nvimの紹介でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした