omohayui blog

おも‐はゆ・い【面映ゆい】[形][文]おもはゆ・し[ク]《顔を合わせるとまばゆく感じられる意》きまりが悪い。てれくさい。

Riot.js のタグファイル名を *.tag.html にする

なぜやるのか

[翻訳] Riotjs Style Guide - Qiita

こちらでも言われているように IDEの補助向上という理由が大きいです。
そして、ただ .html にしてしまうと Riot の tag ファイルだということが
分かりづらくなるということで .tag.html に。

手順

in-browser-compilation の場合

上述の記事にもあるように読み込むファイル名変更するだけ

Webpack tag loader の場合

上述の記事にもあるように loaderの設定を .tag.html に合わせる

pre-compilation の場合

それぞれの compiler に合わせて custom extension を設定する

browserify ( riotify ) でやってみた

gulp task の修正

  • riotify の compile-options に custom-extension で tag.html を指定します
    "browserify": {
        "transform": [
+            [ "riotify" ],
-            [ "riotify", {"ext": "tag.html"} ],
        ]
    }

tagファイルの一括 rename

# 適宜に環境に合わせて
% rename s/\.tag/\.tag\.html/ *

tagファイルを読み込んでいる箇所を一括置換

# 適宜に環境に合わせて 
find . -type f -name '*.js' | xargs perl -i -pe 's/\.tag/\.tag\.html/g'

これだけでIDEがいい感じに動くようになった :D

2017/04/03 追記

IDE側の設定で *.tag をhtmlとして認識させられるのであれば、この対応は不要です。
IntelliJ IDEA では Editor > File Types で変えられたので対応不要でした _(:3 」∠ )_