このエントリははてなエンジニアAdvent Calendar 2021の10日目の記事です。今回はVisual Studio Code向けの拡張を作った話を書きます。
はてな記法そこそこ使っている
自分ははてな社員というのもあり、自社のサービスをちゃんと使っておきたいという気持ちで個人ブログもはてな記法モードで書いています。
ただ普段コード書くときはVS Codeで書いており、VS Codeは現状はてな記法で書かれた文章は認識してくれないので、中々手元で書くモチベーションがあがらない。
また、VS Code拡張作ってる人々が周辺にいたので自分も作ってみたいかもと数日前に突如思い立ちました。
見どころ
見どころを紹介します。
まず基本的なヘッダーや箇条書きは必須ラインとして最初に実装しました。こういうの実装するときは正規表現を考えて書いていくみたいな作業のようで、例えばヘッダーはこのような正規表現を書きました。
行の先頭に * が1-3個あって、それ以降は * 以外が行末まで続く、というもの。
"match": "^(\\*{1,3})[^\\*]*$",
引用なんかは複数行にまたがっているので、どうするんだろうと最初思ったのですが、開始行と終了行の正規表現を指定してあげればOKのようでした。簡単ですね。
"begin": "^(>>)$", "end": "^(<<)$",
面白かったのははてなID記法で、はてなIDははてなブログタグのページに正規表現が載ってました。
正規表現で現すと [a-zA-Z][a-zA-Z0-9_-]{1,30}[a-zA-Z0-9] となる
https://d.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AAID
こちらの正規表現をお借りしつつ、最終的にはてなIDのシンタックスハイライト用の正規表現はこのようになりました。
"match": "\\b(id:[a-zA-Z][a-zA-Z0-9_-]{1,30}[a-zA-Z0-9]:?(detail|image)?:?(large)?)\\b"
少し複雑になりましたが、 id: からはじまるべきなのと、オプションとして末尾に :detail か :image か :detail:large をつけることができるんですね。
また、はてなIDの正規表現をお借りしたおかげで、無効なはてなIDは色がつかないという感じになってお得でした。
作ってみての感想
12/8の終業後と12/9の終業後に実現方法調べて、ちょろっとjsonファイルやREADME書いて、公開作業を行ったらすぐにVS Code拡張対応人材になれて思いのほか簡単でした。 yo codeをお手元のターミナルで実行するだけで拡張に必要なファイル群が全部生成されて楽すぎる。
まだまだ足りない部分が多いので暇な時にもうちょっと定義を追加しておきたいと思います。READMEにちょっとだけTODO書いてます。
参考にしたドキュメント
公式読みましょう
これだけでは具体的な文法はわからなかったりするので、TextMateのほうのドキュメントも参考になります。
また、はてな記法はMarkdownのようなマークアップ言語なので、VS Codeに定義されているMarkdown用の定義もとても参考になりました。
id:cohalz