IntelliJ IDEA 2024.1 ヘルプ

Pug (Jade)

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

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

始める前に

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

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、Pug (旧 Jade) およびファイル監視プラグインを設定 | プラグインページのマーケットプレースタブにインストールします。

Pug のインストール

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install -g pug-cli

Pug のコンパイル

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

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

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

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

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

ファイル監視の詳細を参照してください。

Pug/Jade ファイルウォッチャーを作成する

  1. 設定ダイアログ(Ctrl+Alt+S)を開き、ツール | ファイル監視に移動します。

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

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

  4. ファイル監視に記載されている手順に従います。

構文ハイライトの構成

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

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

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

関連ページ:

プラグインのインストール

プラグインは IntelliJ IDEA のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains...

新規ウォッチャーダイアログ

ファイルウォッチャーページの追加、または編集、ボタンをクリックするとダイアログが開きます。ダイアログを使用して、事前定義済み IntelliJ IDEA File Watcher テンプレートに基づいてプロジェクトファイル監視を作成するか、既存のプロジェクトファイル監視を編集します。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前:「名前」フィールドに、ファイル監視の名前を入力します。デフォ...

ファイル監視

ファイル監視は IntelliJ IDEA ツールであり、IDE でファイルを変更または保存するときに、コンパイラー、フォーマッタ、リンターなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あらかじめ定義されたファイル監視が適用されるすべてのファイルで実行されます。プロジェクトに関連するファイル監視が設定されていない場合、IntelliJ IDEA はファイルウォッチャーを追加すること...

色とフォント

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。IntelliJ IDEA では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択する...

SSH 経由の Node.js

始める前に:設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript、JavaScript デバッガー、Node.js、Node.js リモートインタープリター、FTP/SFTP/WebDAV 接続の必須プラグインが有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。SSH 構成を作成する説明に従って、ターゲットリモートホスト上の SSH サーバーへのアクセスを構成し、このサーバーが実行されていることを確認します。プ...

npm、pnpm、Yarn

IntelliJ IDEA は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。IntelliJ IDEA では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。IntelliJ IDEA は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと packag...