Pug (Jade)
WebStorm は、Pug (Jade) ファイルを HTML に変換する Pug (Jade) テンプレートエンジンと連携しています。
Pug ファイルは 
でマークされています；Jade ファイルは 
でマークされています。
始める前に
コンピューターに Node.js(英語) があることを確認してください。
Pug (ex-Jade) および File Watchers の必須プラグインが 設定 | プラグイン ページ、タブ インストール済み で有効になっていることを確認してください。 詳細については、 プラグインの管理を参照してください。
Pug のインストール
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install -g pug-cli
Pug のコンパイル
コードを自動的にコンパイルするには、テンプレートエンジンをインストールし、ファイルへの変更を追跡してテンプレートエンジンを実行する Pug/Jade File Watcher を構成する必要があります。
ファイルを開くと、WebStorm は現在のプロジェクトで適用可能な File Watcher が存在するかを確認します。 そのような File Watcher が構成されていて無効な場合、WebStorm は設定済みの File Watcher について通知し、有効化を提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成されていて有効な場合、WebStorm は 新しいウォッチャーダイアログで指定されたイベント発生時に自動的にコンパイラーを開始します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスがオフの場合、保存時（、 Ctrl+S ）または WebStorm からフォーカスを移動したとき（フレーム非アクティブ化時）に File Watcher が開始されます。
詳細は File Watchers をご覧ください。
Pug/Jade File Watcher を作成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
をクリックするか、 Alt+Insert を押して、リストから Pug/Jade 定義済みテンプレートを選択します。 コードは JavaScript に翻訳され、生成された ソースマップ(英語)とともに提供されます。プログラム フィールドで、
pugまたはjadeパッケージへのパスを指定します。 パスを手動で入力するか、
をクリックして表示されるダイアログでファイルの場所を選択します。File Watchers に記載されている手順に従って進めてください。
構文ハイライトの構成
好みや習慣に応じて、Pug/Jade 対応の構文ハイライトを設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択し、デフォルトから継承されたハイライト設定をそのまま使用するか、 カラースキーム：エディターのフォントと色彩 の説明に従ってカスタマイズしてください。