Re:VIEW Starter用のVSCode拡張機能を作った

Re:VIEW Starterのシンタックスハイライト・コード補完をするVisual Studio Code(VSCode)拡張機能Re:VIEW Starter Syntax Highlight」を作りました。

インストールはこちら : Visual Studio Marketplace

ソースコードはこちら : GitHubリポジトリー

プレビュー機能はありません。StarterにあるHTMLプレビュー機能をご利用ください)

機能

f:id:yuppi5:20200717232909p:plain

シンタックスハイライト : インライン命令・ブロック命令に色がつきます。ちなみに、画像の内容はPWM波形再現の記事Re:VIEWの形式に変換したものです。

f:id:yuppi5:20200717234006p:plainf:id:yuppi5:20200717233819p:plain

コード補完もついてます!べんり。

f:id:yuppi5:20200717233954p:plain

数式のところはVSCodeLaTeX拡張と同じ緑色に変えました。

経緯

作った経緯は、既存のVSCode拡張機能Re:VIEW Starterで満足に使えなかったからです。新しい命令、命令の入れ子……。そのあたり全てに対応する拡張機能が欲しいと思いました。

そこで、まずはすでにある拡張機能*1を改造する方針を取りました。 しかし、私にとって改造は難易度が高く、この方針は早くも変えられることになります。

次に取った方針は、1から自分で作る方針でした。 1から自分で作るにあたり、思い切ってプレビュー機能を諦めることにしました。というのも、Re:VIEW StarterにはHTMLプレビュー機能があるためです。製作者直轄の機能なので、バグ修正や機能追加がすぐに反映されます。よって不要だと判断しました。まあ、プレビュー機能の実装ができそうになかったのもありますが……。

プレビュー機能を諦めたので、残ったのはシンタックスハイライト、コード補完、文法ミスの指摘ぐらいです。まず必要だと思って実装したのはシンタックスハイライトでした。拡張機能の名前にもあるように、元々はシンタックスハイライトのみにする予定でした。

シンタックスハイライトの部分は構文定義で正規表現を駆使してなんとかしました。やってるときはパズルみたいで楽しいんですが、後から見返すと可読性が最悪になってました。呪文だろこれ。おそらく半年後には読めなくなっているはずです。

f:id:yuppi5:20200718131924p:plain
呪文

入れ子の実装は構文定義でできました。$self。 インライン命令もブロック命令も入れ子も対応してます。 一部の命令は入れ子にできないようですが、ここではインラインLaTeX命令の@<m>{}以外は全て入れ子にできるようになっています。やる気があれば、このあたりも改善する予定です。

f:id:yuppi5:20200718132024p:plain
入れ子の定義

シンタックスハイライトが思ったよりも簡単にできたので、ついでにコード補完を実装しました。現在ある命令をすべて列挙するだけだったので、これもまた簡単でした。実装して良かった。

f:id:yuppi5:20200718132146p:plain
コード補完のワードを列挙

動作確認は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つのサイトを読めば、拡張機能の作成から公開までだいたいできると思います。