Pug (Jade)
PhpStorm は、Pug（Jade）ファイルを HTML に変換する Pug (Jade)(英語) テンプレートエンジンと統合されています。
Pug ファイルは
でマークされています。Jade ファイルは
でマークされています。
始める前に
JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページで Pug (旧 Jade) プラグインをインストールして有効にします。
設定 / 環境設定 | プラグインページでファイル監視バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。
Pug のインストール
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install -g pug-cli
Pug のコンパイル
コードを自動的にコンパイルするには、ファイルへの変更を追跡してテンプレートエンジンを実行する Pug / Jade ファイルウォッチャーを構成する必要があります。
ファイルを開くと、PhpStorm は、該当するファイル監視が現在のプロジェクトで使用可能かどうかを確認します。そのようなファイル監視が構成されているが無効になっている場合、PhpStorm は、構成されたファイル監視について通知し、有効にすることを提案するポップアップを表示します。
現在のプロジェクトで該当するファイル監視が構成されて有効になっている場合、PhpStorm は新しいウォッチャーダイアログで指定されたイベントで自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐにファイル監視が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにすると、ファイルウォッチャーは保存（、Ctrl+S）または PhpStorm からのフォーカス移動時（フレーム非アクティブ化時）に開始されます。
ファイル監視の詳細を参照してください。
Pug / Jade ファイルウォッチャーを作成する
設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、に進みます。
をクリックするか、Alt+Insert を押して、リストから Pug/Jade 定義済みテンプレートを選択します。コードは JavaScript に変換され、生成されたソースマップ(英語)とともに提供されます。プログラムフィールドで、
pugまたはjadeパッケージへのパスを指定します。パスを手動で入力するか、
をクリックして表示されるダイアログでファイルの場所を選択します。ファイル監視に記載されている手順に従います。
構文ハイライトの構成
好みや習慣に応じて、Pug / Jade に対応した構文のハイライトを設定できます。
設定 / 環境設定ダイアログ Ctrl+Alt+S で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。
関連ページ：
プラグインを管理する
プラグインは PhpStorm のコア機能を拡張します。彼ら：バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、...
新規ウォッチャーダイアログ
Windows および Linux 用のファイル | 設定 | ツール | ファイル監視 - 新規ウォッチャーmacOSのPhpStorm | 環境設定 | ツール | ファイル監視 - 新規ウォッチャーファイルウォッチャーページの追加、または編集、ボタンをクリックする...
ファイル監視
ファイル監視は、ファイルへの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、そのような標準的な人気のあるサードパーティツール（コンパイラ、コンプレッサ、プリティファイアなど）の定義済みファイル監視テンプレートを提供します。...
色とフォントの構成
開発者として、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストの書式設定に使用され、一目で理解しやすくなります。PhpStorm は、好適な色とフォントを定義するカラースキームを使用しています。配色は...
V8 CPU とメモリのプロファイリング
PhpStorm を使用すると、V8 のサンプルベースのプロファイラーを使用してNode.jsアプリケーションの CPU プロファイルとヒープスナップショットをキャプチャーして分析できます。Google Chrome DevTools でキャプチャーされたスナップショットを開いて、クライアント側のコ...
npm、pnpm、および Yarn
PhpStorm はnpm、Yarn、Yarn 2、およびpnpmと統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマ...