IntelliJ IDEA 2024.3 ヘルプ

Pug (Jade)

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

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

始める前に

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

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

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

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

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

構文ハイライトの構成

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

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

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

関連ページ:

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

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

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

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

File Watchers

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

色とフォント

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

SSH 経由の Node.js

始める前に:設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript、JavaScript Debugger、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...