IntelliJ IDEA 2026.1 Help

Pug (Jade)

IntelliJ IDEA は、Pug(Jade) ファイルを HTML に変換する Pug (Jade)(英語) テンプレートエンジンと統合されています。

Pug ファイルは the Pug icon でマークされています;Jade ファイルは the Jade icon でマークされています。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. JetBrains Marketplace からプラグインをインストールする説明に従って、 Pug (旧 Jade) および File Watchers プラグインを 設定 | プラグイン ページの Marketplace タブにインストールします。

Pug のインストール

  • 組み込み ターミナル (Alt+F12) で次のように入力します。

    npm install -g pug-cli

Pug のコンパイル

コードを自動的にコンパイルするには、テンプレートエンジンをインストールし、ファイルへの変更を追跡してテンプレートエンジンを実行する Pug/Jade File Watcher を構成する必要があります。

ファイルを開くと、IntelliJ IDEA は現在のプロジェクトで適用可能な File Watcher が使用可能かどうかを確認します。 そのような File Watcher が構成されているが無効になっている場合、IntelliJ IDEA は構成されている File Watcher について通知し、有効にすることを提案するポップアップを表示します。

現在のプロジェクトで該当する File Watcher が構成され、有効になっている場合、IntelliJ IDEAは 新規ウォッチャーダイアログで指定されたイベントが発生すると自動的にコンパイラーを起動します。

  • 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。

  • 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにすると、保存時 (ファイル | すべて保存Ctrl+S) または IntelliJ IDEA からフォーカスを移動したとき (フレームの非アクティブ化時) に File Watcher が開始されます。

File Watchers の詳細を参照してください。

Pug/Jade File Watcher を作成する

  1. 設定 ダイアログ(Ctrl+Alt+S )を開き、 ツール | File Watchers に進みます。

  2. 追加ボタン をクリックするか、 Alt+Insert を押して、リストから Pug/Jade 定義済みテンプレートを選択します。 コードは JavaScript に翻訳され、生成された ソースマップ(英語)とともに提供されます。

  3. プログラム フィールドで、 pug または jade パッケージへのパスを指定します。 パスを手動で入力するか、 参照ボタン をクリックして表示されるダイアログでファイルの場所を選択します。

  4. File Watchers に記載されている手順に従います。

構文ハイライトの構成

好みや習慣に応じて、Pug/Jade 対応の構文ハイライトを構成できます。

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 エディター | カラースキームの切り替え | Pug/Jade に進みます。

  2. カラースキームを選択し、デフォルトから引き継がれたハイライト設定を受け入れるか、 色とフォント に記載された手順 に従ってカスタマイズしてください。

2026 年 3 月 30 日