ERB（eRuby、embedded Ruby）の HTML 上で JavaScript を書きやすくする VS Code 拡張機能を公開しました。
まずは実際に動作している様子を見てください。javascript_tag ブロック内に書いた JavaScript コードに対して以下の機能が利用できます。
- シンタックスハイライト
- コード補完
- ホバーによるメソッドの型や定義の表示
- 定義ジャンプ
本来、ERB ファイルに JavaScript を書いてもコード補完やシンタックスハイライトは効きません。 それを JavaScript ファイルでコードを書くときに近い体験として、ERB 上でも再現できるのが今回の拡張機能です。
開発したモチベーション
筆者は普段、Rails + Hotwire で画面を構築することが多いです。
Hotwire では基本的に Turbo の仕組みを利用して画面を作れます。 しかし実際の開発ではイベントハンドラーを追加したり、HTML のプロパティを付け外ししたりするために、ちょっとした JavaScript を書く場面もよくあります。
しかし、JavaScript を ERB ファイルに直接書く場合は、コードハイライトやコード補完がまったく効きません。 そのため、エディタ支援なしで書いたり、いったん JavaScript ファイルに書いてからコピペしたりして凌いできました。
ただ、こうしたやり方で JavaScript を増やしていくのは流石に大変です。解決できる VS Code 拡張機能も探した範囲では見つかりませんでした。 そこで拡張機能を自作することにしました。せっかくなら同じ問題で困っている人にも役立つかもしれないと思って公開することにしました。
仕組み
シンタックスハイライトは VS Code の TextMate 文法を利用しています。
javascript_tag ブロック内の JavaScript コードを正規表現で検知して、JavaScript として解析・ハイライトされるように設定することで実現できます。
補完やホバーの情報は、javascript_tag に書かれている JavaScript コードを TypeScript Language Service API に渡して取得しています。
取得した情報は VS Code Extension API で連携することで VS Code 上に反映されます。
VS Code Extension API で具体的に提供されているものはざっくり分けて３つです。
- Completion API コード補完候補を返すための拡張API
- Hover API カーソル位置の型情報やドキュメントを表示するためのAPI
- Definition API 「定義へ移動」を提供するAPI
それぞれに TypeScript Language Service API の情報を連携しています。
ぜひ使ってみてください
今は最低限の機能しか入っていませんが、今後は HTML 属性（onclick など）に書いた JavaScript にも反映させることや、簡易的な型チェックなど機能を増やしていくつもりです。 同じ問題でお困りの方はぜひお試しください。
設計に対するコメントや機能要望も歓迎です。
