Pug (Jade)
IntelliJ IDEA は、Pug(Jade) ファイルを HTML に変換する Pug (Jade)(英語) テンプレートエンジンと統合されています。
Pug ファイルは
でマークされています;Jade ファイルは
でマークされています。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
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 を作成する
設定 ダイアログ(Ctrl+Alt+S )を開き、 に進みます。
をクリックするか、 Alt+Insert を押して、リストから Pug/Jade 定義済みテンプレートを選択します。 コードは JavaScript に翻訳され、生成された ソースマップ(英語)とともに提供されます。
プログラム フィールドで、
pugまたはjadeパッケージへのパスを指定します。 パスを手動で入力するか、をクリックして表示されるダイアログでファイルの場所を選択します。
File Watchers に記載されている手順に従います。
構文ハイライトの構成
好みや習慣に応じて、Pug/Jade 対応の構文ハイライトを構成できます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
カラースキームを選択し、デフォルトから引き継がれたハイライト設定を受け入れるか、 色とフォント に記載された手順 に従ってカスタマイズしてください。