Pug (Jade)
PhpStorm は、Pug(Jade) ファイルを HTML に変換する Pug (Jade)(英語) テンプレートエンジンと統合されています。
Pug ファイルは 
でマークされています；Jade ファイルは 
でマークされています。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains Marketplace からプラグインをインストールするの説明に従って、 設定 | プラグイン ページで Pug (旧 Jade) プラグインをインストールして有効化します。
設定で File Watchers プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 検索フィールドに File Watchers と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。
Pug のインストール
コマンドライン シェルまたは組み込みの ターミナル （Alt+F12 ）で、次のように入力してください：
npm install -g pug-cli
Pug のコンパイル
コードを自動的にコンパイルするには、テンプレートエンジンをインストールし、ファイルへの変更を追跡してテンプレートエンジンを実行する Pug/Jade File Watcher を構成する必要があります。
ファイルを開くと、PhpStorm は現在のプロジェクトで適用可能な File Watcher が使用可能かどうかを確認します。 そのような File Watcher が構成されているが無効になっている場合、PhpStorm は構成されている File Watcher について通知し、有効にすることを提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成され、有効になっている場合、PhpStormは 新規ウォッチャーダイアログで指定されたイベントが発生すると自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにすると、保存時 (、 Ctrl+S) または PhpStorm からフォーカスを移動したとき (フレームの非アクティブ化時) に 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 ）で に移動します。
カラースキームを選択し、デフォルトから引き継がれたハイライト設定を受け入れるか、 色とフォント に記載された手順 に従ってカスタマイズしてください。