VS Codeの拡張機能「CRS Script for Biz/Browser」の紹介
はじめまして。株式会社オープンストリーム プロダクト事業本部製品開発部のy-haneです。
今回は、製品開発部で開発中のVS Codeの拡張機能「CRS Script for Biz/Browser」について紹介させてください。
「CRS Script for Biz/Browser」とは？
まず、「Biz/Browser」とは、当社が開発・販売している業務システムのためのアプリケーション開発・実行環境です。エンジニアの方に向けてわかりやすく言うと、「Webアプリケーションのフロントエンドに相当する部分を作成するためのアプリ開発フレームワークと、作成したアプリをクライアント端末で実行するためのランタイムがセットになったもの」です。
Biz/Browserでは、「CRSスクリプト」という専用のスクリプト言語をつかってアプリケーションを記述します。CRSスクリプトは当社独自のもので、言語仕様の策定やコンパイラの開発も当社で行なっています。
そのCRSスクリプトのためのシンタックスハイライターが、「CRS Script for Biz/Browser」です。
Biz/Browser関連ツールの一つとして、現在開発を進めています。
機能
本拡張機能をインストールしたVS CodeでCRSスクリプト（.crsファイル）を開くと、スクリプトがトークンごとにハイライトされます。
ハイライトされるのは下記のトークンです。
コメント
オペレーター（演算子）
リテラル（文字列、数字）
キーワード
ハイライトされる項目は少ないですが、VS CodeでCRSスクリプトを読むのが多少楽になるはずです。
内部構成
本拡張機能の構成および実行イメージは下図の通りです。
ハイライトの機構にはLSP（Language Server Protocol）を、CRSスクリプトの解析にはWebAssemblyでコンパイルしたC++モジュールを利用しています。
VS Codeには実装が簡単なTextMates文法によるハイライト機構がありますが、今回は業界標準であるLSPの基礎研究も兼ねて、LSPでハイライト機能を実現しています。
また、既存のCRSスクリプト解析エンジンがC++で書かれていたため、WebAssemblyを使ってそれを再利用しています。
所感
LSP、WebAssemblyともに初めて触れる技術でしたが、便利なツールのおかげでどちらもさほど苦労せずに組み込むことができました。
LSPをイチから実装しようとするととても大変ですが、VS CodeにはMicrosoftが開発した拡張機能向けのLSPモジュールがあります。このモジュールを利用すれば、LSPのインターフェースの中身、つまりクライアント側からテキストの解析結果を返すコードを書くだけで言語サポート機能を実現することができます。
一方、WebAssemblyはまだまだ発展途上の技術で、これを使えば大丈夫！というようなスタンダードなコンパイラはありませんでしたが、そんな中でも使いやすかったのはemscriptenです。他のコンパイラではtemplateが使えなかったり、std::stringがうまく動かなかったりしましたが、emscriptenではそれらも問題なく使えます。本拡張機能の開発では、TypeScriptから呼び出すためのインターフェースを100行くらい追加しただけで、元々のC++モジュールのコードをほとんど変更せずに動作させることができています。
終わりに
本拡張機能は現在、社内での試験的運用の段階です。
いずれ一般公開する予定なので、Biz/Browserを利用している方は是非使ってみてください。