🌊

coc.nvimのプラグインを作ろうとした話

に公開
coc.nvim
cocextension
tech

coc.nvimで型定義ファイルを日本語に翻訳するプラグインを作ろうとした話

英語が得意でないので、型定義ファイルのコメントを日本語で読みたいなと思い作ろうとしました。

coc.nvimの拡張機能自体始めて作ります。

あんまり日本語で情報がないから苦戦しました。

共有までに

結論

結論からいうと思った通りに作成できなかった。

理由はTsServerから送られてくる型定義情報にを取得できなかったから。

coc.nvimのKを押した際に、実行されるCocActionAsync('doHover')はランゲージサーバーの処理に依存するみたい。

思い描いていた流れ

  1. coc.nvimの型定義ファイル取得処理にフック
  2. フックしたテキストをgoogleのAPIで翻訳
  3. 翻訳前の情報を削除
  4. 翻訳をホバーで表示

得られたもの(共有)

coc extensionの作成方法

yarn もしくは npmでコマンド叩けば最初のものは作ってくれる。

https://github.com/fannheyward/create-coc-extension

スケルトンの作成
npm create coc-extension coc-hogePackage
yarn create coc-extension coc-hogePackage

開発中にすること

init.vimにパスを記載すると開発中としてプラグインを読み込んでくれる

set runtimepath^=~/yourDirectoryPath/coc-hogePackage

ビルドをwatchしてsrc/index.tsを編集
必要に応じてファイルを作る

yarn watch

デプロイ

コンパイルしたものを含めgit hubにパブリックで公開すればよいようだ。

ビルド
yarn

git hubに公開した後

vim pulgなどでインストール

call plug#begin()

" こんな感じ
Plug 'yourRepository/coc-hogePackage'

call plug#end()

書き方

activateの中にプラグインの処理を書いていく

export async function activate(context: ExtensionContext): Promise<void> {
// ここに書く
}

ログの書き方

nvimを開いてcoc actionのworkspase.showOutputでチャンネルを選択すると表示される。

  const logger = window.createOutputChannel("Hoge Package");
  logger.appendLine("Hoge Package extension activated"); // 開発者ログ

ステータスバーにメッセージを表示するには下記のように書く

  window.showInformationMessage("Hoge Package");

coc Commandの登録

コマンドを登録するとキーマップなどで使用できる

  // トグルコマンドの登録
  context.subscriptions.push(
    commands.registerCommand("hogePackage.toggle", async () => {
      // ここにhogePackage.toggleが実行された際の処理を書く
    }),
  );

nnoremap <silent> <leader>ht :CocCommand hogePackage.toggle<CR>

フローティングウィンドウの表示

※別の拡張機能のフローティングウィンドウにはアクセスできない
coc.nvimはもってない

あくまでスコープは自分の拡張機能内みたい。そりゃそうか。

   const floatingWindow = window.createFloatFactory({});
   floatingWindow.show([{ filetype: "markdown", content: "表示メッセージ" }]);

ホバーのトリガー後にメッセージを追加する処理

※他のプラグインのテキストは取得できない
※追加のみ可能

これにより型情報と静的解析した関数型が上書きされず両方表示されるみたい。

  // ホバー処理が完了した後にトリガーされる処理を登録
  languages.registerHoverProvider(["*"], {
    async provideHover(document, position) {
      // document.getText()
      // 他のプラグインのホバー処理が先に実行される
      // この処理は他のプラグインのホバー処理の「後に」実行される

      return {
        contents: "追加するメッセージ",
      };
      // 何も返さない場合は他のプラグインのホバー情報のみが表示される
      return null;
    },
  });

最後に

node_modulesにある型情報のファイルを検索して、コメント部分を翻訳して上書きする方法なら出来そう。

パーサーでうんぬん、うーん！めんどう

今回はここまで!

Discussion