【WebStorm】 Nunjucksにシンタックスハイライトを適用する

【WebStorm】 Nunjucksにシンタックスハイライトを適用する

昨日、健康診断を受診しました ishida です。
昨年は再検査を2度うけることになってしまったので(異常はなかったです)、今回もちょっと心配。
それとバリウムは結構嫌いじゃないタイプです。

JSテンプレートエンジン「Nunjucks」とgulpで快適HTMLコーディング で前回記事を書きました。

WebStormをコーディング時のエディタとして使用しているのですが、
デフォルトのままではNunjucks部分がハイライトしてくれません。

以下のように、extends、set、block、endblock が何もあたってない白のままです。

Nunjucks もシンタックスハイライトさせたいのだ

Nunjucksは、jinja2にインスパイアされて開発されました。
jinja系なので、Twigと書式も似ています。

ってこと以下のプラグインをインストールしちゃいましょう。

Twig Support プラグイン

インストール

こちらのプラグインをWebStormからインストールする場合は、以下の手順となります。

環境設定メニューから plugins へ移動し、
「Install JetBrains plugin...」ボタンをクリック。

検索エリアに「Twig」と入力して、
プラグインをインストールしてWebStormを再起動します。

インストールしただけでは、.twig拡張子でしか反映されません。
そのため、.html拡張子でも反映されるようにファイルタイプの設定をします。

拡張子(.html)追加

File Typesのメニューから Twigに対して、
適用したいファイル拡張子を追加します。

.htmlと.njkの2種類を追加してみました。

色がついたー

設定が終わったのでNunjucksを使っているhtml拡張子のファイルを見てみましょう。

extends、set、block、endblock もハイライトされるようになりました。

まとめ

シンタックスハイライトがないと、タグの記述ミスとかも増えるので設定できるものは全てやっておきたいものです。 WebStormでNunjucksを使う機会がありましたら参考にしてみてください。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ