【Vim】Firestore Security Rules 用のプラグインを作った

7453 ワード
Vim Firebase vimscript vim-plugins Firestore Vim テキストリンク

表題の通り、作ってみました。VSCode 用やら Atom 用などはすでにあるのですが、Vim 用のが見つかんなかったので……。

まずは、構文ハイライト機能を作りました。コード補完や定義ジャンプなどもそのうちできたらいいですね！（予定は未定）

こんな風に、いい感じに色がつきます。

syntax プラグインの作り方

Vim の構文ハイライトはとにかく高機能です。ありとあらゆる言語のニーズに対応するため、機能は複雑で簡単に把握できるものではありません。もちろんドキュメントは完備されているのですが、現時点で 5,344 行 / 142,720 文字あります。

というわけで、かいつまんで要点だけ書きます。

ftdetect プラグイン

まずは、開いたファイルに対してどの構文ハイライトを使うのか決めないといけません。このために使われるのが ftdetect プラグインです。プラグインのディレクトリに ftdetect/firestore.vim というファイルを作ります。

ftdetect/firestore.vim
autocmd BufNewFile,BufRead firestore.rules set filetype=firestore

これには多くの説明はいらないでしょう。詳しくは :h ftdetect, :h :autocmd などを読んでみてください。

syntax プラグイン

ここからが本番です。syntax/firestore.vim というファイルを作成し、まずはおまじないを記入します。

syntax/firestore.vim
if exists('b:current_syntax')
  finish
endif

" ... ここにプラグイン本体を書く ...

let b:current_syntax = 'firestore'

同じファイルタイプのファイルを開いたときに、重複して読み込まれないようにしているのですね。

文字に色がつく仕組み

Vim による構文ハイライトは以下のようにして行われます。

  1. :syntax コマンドで構文グループを定義する。
  2. :highlight コマンドで構文グループに色をつける。

構文グループとは、指定した規則に基づいて区分した同種のアイテムを指します。……まあこの説明じゃまずわかんないと思いますので例をあげましょう。

構文グループの種類

キーワード

一番単純な構文グループです。指定した単語を色付けするときに使います。

syn keyword firestoreTodo TODO FIXME XXX BUG

syn は syntax コマンドの省略形です。ここから先は慣例に則って省略形を使います。highlight コマンドの省略形は hi です。

この例では TODO, FIXME, XXX, BUG という単語たちに firestoreTodo という名前をつけています。これが構文グループです。

リージョン 

syn region firestoreFunctionBlock start=/{/ end=/}/

これも何と無く分かりますね。{ から始まって、} で終わる領域（リージョン）に firestoreFunctionBlock という名前をつけています。

マッチ 

syn match firestoreComment +//.*+

これも簡単。正規表現を使って指定するパターンです。この例では //... のような部分はコメントだよ、ってことで firestoreComment と名付けているのです。

構文グループに色をつける

あとは色付け……なのですが、一つ一つの構文グループに直接色を指定することはまずありません。Vim にはカラースキームというものがありますので、個人の好みによってつけたい色が異なるはずだからです。

そこで、ハイライトのリンクという機能を使います。システムにデフォルトで定められた構文グループにリンクすることで、同種の色を使うことを Vim に教えてあげるのです。

hi def link firestoreComment Comment

これにより、firestoreComment という構文グループは Comment と同じ色にしてね、ということを伝えています。これにより、カラースキームごとに違った色で表示されるはずです。

さらなる深みへ……

はい！今日はここまで！ここまでの説明で、構文ハイライトの基本は抑えられています。vim-firestore を作るために調べたヘルプへのリンクを載せておきますので参考にしてください。

また、以下の記事には大変お世話になりました。もっと詳しく知りたい人は参照してください。