Re:VIEW Starterのシンタックスハイライト・コード補完をするVisual Studio Code(VSCode)拡張機能「Re:VIEW Starter Syntax Highlight」を作りました。
インストールはこちら : Visual Studio Marketplace
ソースコードはこちら : GitHubリポジトリー
(プレビュー機能はありません。StarterにあるHTMLプレビュー機能をご利用ください)
機能
シンタックスハイライト : インライン命令・ブロック命令に色がつきます。ちなみに、画像の内容はPWM波形再現の記事をRe:VIEWの形式に変換したものです。
コード補完もついてます!べんり。
数式のところはVSCodeのLaTeX拡張と同じ緑色に変えました。
経緯
作った経緯は、既存のVSCode拡張機能がRe:VIEW Starterで満足に使えなかったからです。新しい命令、命令の入れ子……。そのあたり全てに対応する拡張機能が欲しいと思いました。
そこで、まずはすでにある拡張機能*1を改造する方針を取りました。 しかし、私にとって改造は難易度が高く、この方針は早くも変えられることになります。
次に取った方針は、1から自分で作る方針でした。 1から自分で作るにあたり、思い切ってプレビュー機能を諦めることにしました。というのも、Re:VIEW StarterにはHTMLプレビュー機能があるためです。製作者直轄の機能なので、バグ修正や機能追加がすぐに反映されます。よって不要だと判断しました。まあ、プレビュー機能の実装ができそうになかったのもありますが……。
プレビュー機能を諦めたので、残ったのはシンタックスハイライト、コード補完、文法ミスの指摘ぐらいです。まず必要だと思って実装したのはシンタックスハイライトでした。拡張機能の名前にもあるように、元々はシンタックスハイライトのみにする予定でした。
シンタックスハイライトの部分は構文定義で正規表現を駆使してなんとかしました。やってるときはパズルみたいで楽しいんですが、後から見返すと可読性が最悪になってました。呪文だろこれ。おそらく半年後には読めなくなっているはずです。
入れ子の実装は構文定義でできました。$self
。
インライン命令もブロック命令も入れ子も対応してます。
一部の命令は入れ子にできないようですが、ここではインラインLaTeX命令の@<m>{}
以外は全て入れ子にできるようになっています。やる気があれば、このあたりも改善する予定です。
シンタックスハイライトが思ったよりも簡単にできたので、ついでにコード補完を実装しました。現在ある命令をすべて列挙するだけだったので、これもまた簡単でした。実装して良かった。
動作確認はRe:VIEW Starterで生成される*.reファイルで一通りしました。//sampleoutputbegin
あたりはユーザーズガイドに載っていませんでしたが、生成された*.reファイルにあったので一応ハイライトされるようにしています。
2日間で集中して作ってたら公開できる段階まで来たので、せっかくだし公開しようということになりました。公開は思ったよりも簡単にできました。アカウントを取ってトークンを入手するので面倒かなと思っていましたが、GitHubとの連携があったのでずいぶん楽でした。
これで拡張機能をバンバン公開していけますね。たぶんしない。
参考サイト
Re:VIEW Starter
ここから言及しないと始まらない。このために拡張機能を作りました。素晴らしいツールです。
【VS Code】HSPのSyntax Highlight Extensionを作った話 - Qiita
シンタックスハイライトの拡張機能を作る解説です。ひな形をコマンドで作成するところから解説されています。とても参考になりました。
VSCodeで俺々言語モードを作る - Qiita
VSCodeで新しい言語のための拡張機能について全般的に解説されているサイトです。とても参考になりました。
Sublime Text2 言語パッケージ作成:構文定義 - Qiita
解説はSublime Textですが、VSCodeでもそのまま使えます。構文定義でとても参考になりました。
拡張機能の公開 | 非公式 - Visual Studio Code Docs
マーケットプレイスへの拡張機能の登録について解説されています。 非公式日本語訳だそうですが、とても参考になりました。
この4つのサイトを読めば、拡張機能の作成から公開までだいたいできると思います。