stefafafan の fa は3つです

"すてにゃん" こと id:stefafafan のブログです

Mackerelの「式グラフ」記法のシンタックスハイライトに対応したVS Code拡張を作った

こちらはMackerel Advent Calendar 2021の12日目の記事です。

先日以下のような記事を書いたのですが、Mackerel Advent Calendarを今日みたら空きがあったのでついでにMackerel向けの拡張もさっと作ってみました。
VS Codeの拡張作りに関する話は以下のエントリに色々書いてるので興味あればこちらもよろしくお願いします)。

stefafafan.hatenablog.com

「式グラフ」とは

Mackerelでは実験的機能として、式を書いて既存のメトリックの値を組み合わせて、グラフを作ることができます。

mackerel.io

また、同じ「式」を利用して、監視も行うことができます。

mackerel.io

おすすめな使い方などについてはこのエントリが参考になると思います。

mackerel.io

式を書くのがちょっと難しい

上記の式ですが、Mackerel特有のものなので手元のエディタなどで定義を書いていくのが意外と難しい。そう思ったので、VS Codeの拡張で関数名などに色をつける拡張作ってみました。

作りました

よろしくお願いします。

marketplace.visualstudio.com

リポジトリです。
github.com

この拡張を入れて言語モードを Mackerel にすると (もしくはファイルの拡張子を .mackerel にすると) 以下のように関数名や一部のシステムメトリックなどに色がついてみやすくなります。色の付き具合はお使いのテーマにもよりますので色々試してみてください。

f:id:stefafafan:20211212204018p:plain
拡張を入れた様子

括弧の対応をわかりやすくする拡張や、インデントに色をつける拡張などと併用するとよりわかりやすさが増して良いと思います。

f:id:stefafafan:20211212204711p:plain
ほかの拡張と併用した状態

marketplace.visualstudio.com
marketplace.visualstudio.com

ぜひご活用ください。