monaco editorにANTLRで独自言語を載せるをReactでやる

頑張った

github.com



以下の記事で、monaco editorにANTLRベースのパーサを組み込んで独自言語のシンタックスハイライトやエラー表示を行っている

tomassetti.me

これに、Reactからmonaco editorを使えるようにするやつを組み込む

github.com

すると簡単にReactに独自言語が動くエディタが載って遊べるぜ!というわけではなく、以下のようなことをやって解決

  • @monaco-editor/reactで言語の登録をどこで行うか?
    • EditorのbeforeMountとonMountで処理すれば良い
  • Common JSとES moduleが混在していてimportやテストが上手く動かない
    • ANTLRのバージョンを上げる
    • テストもvitestに変更する