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 を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように PhpStorm のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を...
新規ウォッチャーダイアログ
ファイルウォッチャーページの追加、または編集、ボタンをクリックするとダイアログが開きます。ダイアログを使用して、事前定義済み PhpStorm File Watcher テンプレートに基づいてプロジェクトファイル監視を作成するか、既存のプロジェクトファイル監視を編集します。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：「名前」フィールドに、ファイル監視の名前を入力します。デフォルトでは、...
ファイル監視
ファイル監視は、ファイルへの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、そのような標準的な人気のあるサードパーティツール（コンパイラー、コンプレッサー、プリティファイアなど）の多くに事前定義されたファイルウォッチャーテンプレートを提供します。カスタムファイル監視を設定して、他のサードパーティツールを実行することもできます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能イ...
色とフォントの構成
開発者として、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストのフォーマットに使用され、一目で理解しやすくなります。PhpStorm は、好適な色とフォントを定義するカラースキームを使用しています。配色は、ウィンドウ、ダイアログ、コントロールの外観を定義するインターフェーステーマとは異なります。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有する...
V8 CPU とメモリのプロファイリング
PhpStorm を使用すると、V8 のサンプルベースのプロファイラーを使用して Node.js アプリケーションの CPU プロファイルとヒープスナップショットをキャプチャーして分析できます。Google Chrome DevTools でキャプチャーされたスナップショットを開いて、クライアント側のコード用に探索することもできます。始める前に：設定 / 環境設定 | プラグインページで Node.js バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照...
npm、pnpm、Yarn
PhpStorm は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。PhpStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。PhpStorm は、package.json ファイルを解析し、スクリプト...