JetBrains Rider 2024.1 ヘルプ

Pug (Jade)

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

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

始める前に

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

  2. 設定 | プラグインページのインストール済みタブで、Pug (旧 Jade) およびファイル監視に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

Pug のインストール

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

    npm install -g pug-cli

Pug のコンパイル

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

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

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

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

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

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. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、配色: IDE テキストのフォントと色の説明に従ってカスタマイズします。

関連ページ:

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

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

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

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

ファイル監視

ファイル監視は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する JetBrains Rider システムです。JetBrains Rider は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みのファイルウォッチャーテンプレートを提供するカスタムファイル監視を設定して、他のサードパーティツールを実行することもできます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用...

配色: IDE テキストのフォントと色

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

SSH 経由の Node.js

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

npm、pnpm、Yarn

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