【WebStorm】Nunjucksにシンタックスハイライトを適用する
WebStormをコーディング時のエディタとして使用しているのですが、
njk拡張子のファイルは、デフォルトのままではNunjucks部分もHTML要素もハイライトしてくれません。
以下のように、extends、block、endblock など何もあたってない白のままです。
Nunjucks もシンタックスハイライトさせたいのだ
Nunjucksは、jinja2にインスパイアされて開発されました。
jinja系なので、Twigと書式も似ています。
ってこと以下のプラグインをインストールしちゃいましょう。
Twig Support プラグイン
インストール
こちらのプラグインをWebStormからインストールする場合は、以下の手順となります。
環境設定メニューから plugins へ移動し、
「Install JetBrains plugin...」ボタンをクリック。
検索エリアに「Twig」と入力して、
プラグインをインストールしてWebStormを再起動します。
インストールしただけでは、.twig拡張子でしか反映されません。
そのため、.njk拡張子でも反映されるようにファイルタイプの設定をします。
拡張子（.htmlと.njk）追加
File Typesのメニューから Twigに対して、
適用したいファイル拡張子を追加します。
.htmlと.njkの2種類を追加してみました。
色がついたー
設定が終わったのでNunjucksを使っているnjk拡張子のファイルを見てみましょう。
Nunjucks部分もHTML要素もハイライトされるようになりました。
まとめ
シンタックスハイライトがないと、タグの記述ミスとかも増えるので設定できるものは全てやっておきたいものです。 WebStormでNunjucksを使う機会がありましたら参考にしてみてください。
