Pug (Jade)
JetBrains Rider は、Pug (Jade) ファイルを HTML に変換する Pug (Jade) テンプレートエンジンと統合されています。
Pug ファイルは
でマークされています;Jade ファイルは
でマークされています。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
Pug (旧 Jade) と File Watchers の必須プラグインが 設定 | プラグイン ページ、タブ インストール済み で有効化されていることを確認してください。 詳細については、 プラグインの管理を参照してください。
Pug のインストール
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install -g pug-cli
Pug のコンパイル
コードを自動的にコンパイルするには、テンプレートエンジンをインストールし、ファイルへの変更を追跡してテンプレートエンジンを実行する Pug/Jade File Watcher を構成する必要があります。
ファイルを開くと、JetBrains Rider は現在のプロジェクトで該当するファイルウォッチャーが利用可能かどうかを確認します。 そのようなファイルウォッチャーが構成されていて無効の場合、JetBrains Rider は構成済みのファイルウォッチャーについて案内し、有効化を提案するポップアップを表示します。
該当するファイルウォッチャーが現在のプロジェクトで構成および有効化されている場合、JetBrains Rider は 新規ウォッチャーダイアログ で指定されたイベントが発生すると自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーする。 チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする。 チェックボックスがオフの場合、保存時 (、 Ctrl+S) または JetBrains Rider からフォーカスを移動した際(フレームの非アクティブ化時)にファイルウォッチャーが開始されます。
Pug/Jade File Watcher を作成する
設定 ダイアログ(Ctrl+Alt+S )を開き、 に進みます。
をクリックするか、 Alt+Insert を押して、リストから Pug/Jade 定義済みテンプレートを選択します。 コードは JavaScript に翻訳され、生成された ソースマップ(英語)とともに提供されます。
プログラム フィールドで、
pugまたはjadeパッケージへのパスを指定します。 パスを手動で入力するか、をクリックして表示されるダイアログでファイルの場所を選択します。
File Watchers に記載されている手順に従ってください。
構文ハイライトの構成
環境設定や習慣に応じて、Pug/Jade 対応の構文ハイライトを設定できます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
カラースキームを選択するか、デフォルトから継承されたハイライト設定を受け入れるか、 カラースキーム:IDE テキストのフォントと色 の説明に従ってカスタマイズします。