雑文発散

▼ [Emacs] Emacs での HTML（テンプレート）編集用のモードを探していたら web-mode を教えてもらった

こんな HTML の要素があるとする。

<div id="hoge" class="fuga"></div>

例えば、この class のアトリビュート値をサーバ側で生成した値で動的に変更したい場合があるとする。 Twig の場合は、こんな感じになるだろう。

<div id="hoge" class="{ { data.className } }"></div>

この動的に生成される値が1つ2つなら、上記の書き方で良いのだけど、もっと増えてくると、横に長くなってしまって見にくく感じるため、ひとつの HTML タグの中に改行を入れたりしている。

<div
   id="hoge"
   class="{ { data.className } }"
   data-x="{ { data.x } }"
   data-y="{ { data.y } }"
>
</div>

HTML の規格的に、タグ内での改行はどうなの？って疑問は無くはないけど、そこはあまりマジメに調べていない。ざっくり調べたところだと「望ましくない」的に書いてあったサイトはあったけど、そっから先までたどっていない。まぁ、これは置いておく。

問題は、そこではなく、こういった記述をする場合、どういうインデントが正しいのか？というところ。

世間的に認知された「正しいインデント」に関しては見つけられなかったので、社内で聞いてみたけど、この部分に関しては明確なコーディングルールも無かった。でも、おおよそ「id やら class やらの前は 2 スペースがいいんじゃね？」ということになったので、そちらに統一していくことにした。

ところが、普段 Twig テンプレートの編集に使っている jinja2-mode （Twig は Jinja2 とほぼ同じ構文なので流用できる） だと、id や class の前は 3 スペースのインデントになってしまう。

じゃあ、html-mode にしてみたらどうだ？と思ったけど、やっぱり 3 スペース。

それぞれのモードのソースをさらっと眺めてみたけど、それっぽいカスタマイズ用の変数名は見つけられず。他に何か方法はないかなぁと、ダメ元で呟いてみた。

Emacsのhtml-modeかjinja2-modeで、この例 https://t.co/ENcuMP5Sae の id= や class= の前のインデントを2文字にしたい場合って、どうすれば良いのだろう？ sgml-basic-offset とかではダメで。 #emacs

— suzuki (@suzuki) 2014, 4月 2

すると、helm-gtags のときにもお世話になった syohex さんから返信が。

@suzuki web-modeだといけそうですが, html-modeでは無理そうでした. 自分で indent-line-functionを置き換えるぐらいのことをしないと, html-modeでは厳しそうです.

— Syohei YOSHIDA (@syohex) 2014, 4月 2

ということで、web-mode を試してみることにした（つづく）。