ツイートシェアはてブ LINE Pocket

npm、pnpm、Yarn

JetBrains Rider は npm(英語)、pnpm(英語)、Yarn(英語)、Yarn 2(英語)、Yarn 3 と統合されているため、組み込みのターミナルで IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。

JetBrains Rider では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。JetBrains Rider は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定義の間を移動できるようにします。詳細については、npm(英語)、Yarn(英語)、pnpm (英語) の公式 Web サイトを参照してください。

JetBrains Rider は Yarn ワークスペース(英語)を持つプロジェクトを検出し、ワークスペースの package.json ファイルにリストされているがルート node_modules フォルダーにあるすべての依存関係を索引付けします。

始める前に

Node.js をダウンロードしてインストールします。npm もインストールされているため、これを使用する場合は、前の手順を完了してください。
Yarn を使用するには、Yarn オフィシャル Web サイト(英語)の説明に従ってインストールしてください。
pnpm を使用するには、埋め込まれたターミナル（Alt+F12）を開き、次のように入力します。
npm install --g pnpm
詳細については、pnpm の公式 Web サイト(英語)を参照してください。

プロジェクトパッケージマネージャーを選択する

JetBrains Rider を使用すると、プロジェクトで npm、Yarn、Yarn 2、または pnpm のいずれを使用するかを選択できます。

デフォルトでは、JetBrains Rider は npm を提案します。ただし、yarn.lock ファイルを含むプロジェクトを開き、コンピューターに Yarn がインストールされている場合、JetBrains Rider はこのプロジェクトのパッケージマネージャーを自動的に Yarn に変更します。

pnpm-lock ファイルを使用してプロジェクトを開き、pnpm がコンピューターにインストールされている場合、JetBrains Rider はこのプロジェクトのパッケージマネージャーを自動的に pnpm に変更します。

Yarn 1 または pnpm をデフォルトの JetBrains Rider パッケージマネージャーとして設定するも使用できます。

設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | Node.js に移動します。Node.js ページが開きます。
パッケージマネージャーフィールドで、プロジェクトのパッケージマネージャーを指定します。
- システムのデフォルトのインストールを使用するには、npm、yarn、または pnpm を選択します。
  JetBrains Rider は、これらのマネージャーへの現在のシステムパスに npm、yarn、pnpm エイリアスを使用します。別の Node.js バージョンを選択した場合、JetBrains Rider は npm エイリアスパスも変更して、選択した Node.js バージョンにバンドルされている npm バージョンを指すようにします。
- パッケージマネージャーのカスタムインストールを使用するには、選択をクリックし、関連するパッケージマネージャーのインストールフォルダーを選択します。
実行 / デバッグ構成: NPM ダイアログのパッケージマネージャーリストから Project エイリアスを選択すると、JetBrains Rider は選択したパッケージマネージャーを自動的に使用します。JetBrains Rider は、'npm install' の実行 / 実行 'yarn install'/ 実行 'pnpm install' コマンドを呼び出したり、npm/Yarn/pnpm スクリプトを実行したりするたびに、選択したパッケージマネージャーへのパスも使用します。詳細については、スクリプトの実行とデバッグを参照してください。

プロジェクトで Yarn 2 を設定する

Yarn 1 がグローバルにインストールされていることを確認し、Yarn オフィシャル Web サイト(英語)の説明に従って、プロジェクトで Yarn 2 を有効にします。埋め込まれたターミナル Alt+F12 を使用して、コマンドを入力します。
設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | Node.js に移動し、パッケージマネージャーリストからプロジェクト内の Yarn 2 パッケージへのパスを選択します。

Yarn 1 または pnpm をデフォルトの JetBrains Rider パッケージマネージャーとして設定する

新規プロジェクトの設定ダイアログ（ファイル | 新規プロジェクトの設定）を開き、言語 & フレームワーク | Node.js に進みます。
開いた Node.js および NPM ページで、パッケージマネージャーリストから yarn または pnpm を選択します。

その後、JetBrains Rider は、新しいプロジェクトを作成するたびに、選択されたパッケージマネージャー（Yarn または pnpm）をデフォルトとして提案します。

package.json を編集する

JetBrains Rider は、package.json ファイルでプロジェクトの依存関係を処理するのに役立ち、広範なコーディング支援を提供します。

パッケージ名についてはコード補完。
利用可能な最新のパッケージバージョンに関する情報。
npm install <package>@<version> または yarn add <package>@<version> を介してインストールできるバージョンの範囲に関する情報。` npm install または yarn install を実行すると、この範囲から入手可能な最新バージョンがインストールされます。
Ctrl を押してバージョンにカーソルを合わせると、ツールチップに情報が表示されます。セマンティックバージョニングの詳細については、npm の公式ドキュメント(英語)を参照してください。
以前のパッケージバージョンのコード補完。Ctrl+Space を押すか、最新のものとは異なるバージョンを入力し始めると、JetBrains Rider はパッケージの以前のすべてのバージョンを含む候補リストを表示します。
パッケージのクイックドキュメント検索。
require または import ステートメントからドキュメント検索を呼び出すと、JetBrains Rider は npm パッケージ用の readme ファイルも表示します。

パッケージのインストールと更新

ご存知のように、npm はパッケージをグローバル(英語)に、またはプロジェクトの依存関係や開発の依存関係としてインストールできます。詳細については、npm の公式 Web サイトを参照してください(英語)。

pnpm は、パッケージをグローバルにインストールするか、プロジェクトの依存関係または開発の依存関係としてインストールします。詳細については、pnpm の公式 Web サイトを参照してください(英語)。

Yarn を使用すると、パッケージをグローバル(英語)にインストールすることも、プロジェクトの依存関係としてインストールすることもできます。詳細については、Yarn オフィシャル Web サイト(英語)を参照してください。

JetBrains Rider では、パッケージはエディター、package.json ファイル、組み込みのターミナル Alt+F12、または Node.js ページにインストールできます。

package.json から

プロジェクトの依存関係をインストールする

ポップアップで 'npm install' の実行、実行 'yarn install'、実行 'pnpm install' リンクをクリックします。
JetBrains Rider は、依存関係がまだインストールされていない場合、または依存関係が変更された場合に、このポップアップを表示します。ポップアップを閉じるか今後このメッセージを表示しないを選択してポップアップをオフにしても、実行 '<package_manager> install' アクションまたは内蔵ターミナルを使用して依存関係をインストールできます。
この通知を誤って閉じてしまい、元に戻したい場合は、Ctrl+Shift+A を押して Enable notifications と入力し始め、リストから package.json の依存関係のインストールに関する通知を有効化するを選択します。
または、関連する package.json ファイルをエディターで開くか、プロジェクトツールウィンドウで選択して、コンテキストメニューから 'npm install' の実行を選択します。

プロジェクトの依存関係を更新する

ポップアップで実行 '<package manager> install' をクリックします。
プロジェクトを開いたり、バージョン管理から更新したり、package.json を編集するたびに、JetBrains Rider はこのポップアップを表示します。
JetBrains Rider は、dependencies または devDependencies からのパッケージがインストールされているかどうか、およびそれらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。インスペクションが不一致を検出した場合、クイックフィックスを提案します。適用するには、実行 '<package manager> install' リンクをクリックします。
JetBrains Rider は、新しいバージョンが利用可能なパッケージも検出し、パッケージバージョンにカーソルを合わせるとクイックフィックスを提供します。
または、Alt+Enter を押して、リストから <package> を最新バージョンに更新しますを選択します。

内蔵ターミナル

埋め込まれたターミナル（Alt+F12）で、次のいずれかのコマンドを入力します。

グローバルインストールの場合:
- npm install --global <package_name>
- yarn global add <package_name>
- pnpm --global add <package_name>
パッケージをプロジェクト依存関係または開発依存関係としてインストールするには:
- npm install --save <package_name> または npm install --save-dev <package_name>
- yarn add <package_name> --dev
- pnpm add --save-dev <package_name>

package.json ファイルにリストされているすべての依存関係をインストールする

埋め込まれたターミナル（Alt+F12）で、次のいずれかのコマンドを入力します。

npm install
yarn install
pnpm install

その結果、現在のフォルダーから package.json にリストされているすべての依存関係を取得します。package.json の編集からさらに学びましょう。

脆弱なパッケージを検出する

JetBrains Rider は、CheckmarxSCA データベース(英語)と全国脆弱性データベース(英語)を調べて、プロジェクトで使用されているパッケージの脆弱性を検出します。コードを作成すると、IDE は脆弱性があると考えられるパッケージをハイライトし、その説明を提供し、可能な場合は修正を提案します。検出された脆弱なパッケージのリスト全体が問題ツールウィンドウに表示されます。

脆弱性チェックは、パッケージチェッカー(英語)プラグインに依存する脆弱な宣言済みの依存関係コードインスペクションによって処理されます。このプラグインは、アプリケーションセキュリティリーダーであるチェックマルクス(英語)によって提供されています。このプラグインは JetBrains Rider にバンドルされており、デフォルトで有効になっています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。詳細については、プラグイン設定を開くを参照してください。

Detect vulnerable packages and fix them in the editor

エディターでパッケージの脆弱性の問題を解決する

package.json ファイル内のハイライトされたパッケージにマウスを置きます。ポップアップツールウィンドウには、検出された脆弱性の説明が表示されます。
クイックフィックスを適用するには、その他のアクション Alt+Enter をクリックして、関連する提案を選択します。

問題ツールウィンドウで脆弱なパッケージを表示する

インスペクションウィジェットでをクリックします。
問題ツールウィンドウのファイルタブには、アクティブなエディタータブで開かれている package.json の脆弱なパッケージがすべてリストされます。各項目には説明が付いています。
問題を解決するには、リストで脆弱なパッケージを選択し、ツールバーのをクリックするか、Alt+Enter を押して、関連する提案を選択します。
脆弱な依存関係タブには、プロジェクト内で検出されたすべての脆弱なパッケージがリストされます。
問題を修正するには、リストで脆弱なパッケージを選択し、右側のペインで安全なバージョンをクリップボードにコピーリンクをクリックし、コピーしたバージョンを package.json に貼り付けます。

パッケージの脆弱性チェックを無効にする

デフォルトでは、パッケージの脆弱性チェックは有効になっています。

これをオフにするには、設定 / 環境設定ダイアログ (Ctrl+Alt+S) を開き、エディター | インスペクションに移動し、セキュリティノードの脆弱な宣言済みの依存関係インスペクションの横にあるチェックボックスをオフにします。
あるいは、設定 / 環境設定ダイアログ (Ctrl+Alt+S) を開き、プラグインに移動し、パッケージチェッカープラグインを見つけて、「無効にする」をクリックします。

スクリプトの実行とデバッグ

npm、Yarn、pnpm スクリプトは、エディターの package.json ファイルから、専用の npm ツールウィンドウのスクリプトツリーから、専用の実行構成に従って、または start-up または before-launch タスクとして自動的に起動できます。

スクリプトの実行結果は実行ツールウィンドウに表示されます。ツールウィンドウには、npm または Yarn スクリプトの出力、エラーの報告、見つからなかったパッケージまたはプラグインの一覧などが表示されます。最後に実行されたスクリプトの名前がツールウィンドウのタイトルバーに表示されます。

スクリプトデバッグセッションを起動すると、JetBrains Rider はデバッグツールウィンドウを開きます。

スクリプトのデバッグセッション中に、スクリプトをステップ実行したり、スクリプトの実行を停止および再開したり、中断時にスクリプトを調べたり、デバッガーコンソールで JavaScript コードスニペットを実行したりできます。

package.json からスクリプトを実行してデバッグする

JetBrains Rider は package.json ファイルから単一のスクリプトを素早く起動させます。いくつかのスクリプトを実行またはデバッグするには、実行構成または npm ツールウィンドウを使用します。

エディターで関連する package.json ファイルを開き、スクリプトの横のガターにあるをクリックして、コンテキストメニューから実行 <スクリプト名> またはデバッグ <スクリプト名> を選択します。
Ctrl+Shift+F10 を押してスクリプトを実行することもできます。

スクリプトの出力は、実行ツールウィンドウに表示されます。

デバッグモードでスクリプトを起動すると、JetBrains Rider はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。

npm ツールウィンドウからスクリプトを実行およびデバッグする

ソリューションエクスプローラーで package.json ファイルを選択するか、エディターで開いてコンテキストメニューから npm スクリプトの表示を選択すると、npm ツールウィンドウが開きます。

npm、pnpm、Yarn を呼び出すとすぐに、ツールは、呼び出された package.json ファイルの scripts プロパティ内で定義されたスクリプトのツリーの構築を開始します。

プロジェクトに複数の package.json ファイルがある場合は、それらごとに個別のスクリプトツリーを構築し、以前に構築したツリーを削除せずにスクリプトを実行できます。各ツリーは、個別のノードに表示されます。

npm ツールウィンドウがまだ開いていない場合は開く

ソリューションエクスプローラーで必要なファイルを選択するか、エディターで開いてコンテキストメニューから npm スクリプトの表示を選択します。
npm ツールウィンドウが開き、選択または開いた package.json ファイルに従って作成されたスクリプトツリーが表示されます。

すでに開いている npm ツールウィンドウでスクリプトのツリーを構築する

npm ツールウィンドウで、ツールバーのをクリックして、リストから必要な package.json ファイルを選択します。デフォルトでは、JetBrains Rider はプロジェクトのルートに package.json ファイルを表示します。
別の package.json ファイルがある場合は、package.json を選択してくださいをクリックして表示されるダイアログで必要な package.json ファイルを選択します。JetBrains Rider は、選択した package.json ファイルへのパスをタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

ツリーを再構築する

必要なノードに切り替えて、ツールバーのをクリックします。

ツリー内のスクリプトを名前でソートする

ツールバーのをクリックし、メニューから並べ替えを選択してから、名前を選択します。
デフォルトでは、ツリーには、package.json（オプション定義順序）で定義されている順序でスクリプトが表示されます。

1 つのスクリプトを実行する

スクリプトをダブルクリックしてください。
ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから実行 <script name> を選択します。

1 つのスクリプトをデバッグする

ツリー内のスクリプトを選択して、コンテキストメニューからデバッグ <スクリプト名> を選択します。
JetBrains Rider はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。

Debug one script from the npm tool window

複数のスクリプトを実行またはデバッグする

複数選択モードを使用します。Shift （隣接するアイテムの場合）または Ctrl （隣接しないアイテムの場合）キーを押しながら必要なスクリプトを選択してから、選択のコンテキストメニューから実行またはデバッグを選択します。

実行構成によるスクリプトの実行とデバッグ

エディターまたは npm ツールウィンドウからスクリプトを実行またはデバッグすると、JetBrains Rider は一時的な実行構成を自動的に作成します。使用する以外に、独自の npm 実行構成を作成して起動できます。

NPM の実行 / デバッグ構成を作成する

実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから npm を選択します。実行 / デバッグ構成: npm ダイアログが開きます。
実行する CLI コマンド、実行するスクリプト（区切り文字として空白を使用）、およびこれらのスクリプトが定義されている package.json ファイルの場所を指定します。必要に応じて、スクリプトを実行するためのコマンドライン引数(英語)を入力します。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、JetBrains Rider は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、JetBrains Rider はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、をクリックして新しいインタープリターを構成することもできます。
必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーターと環境変数(英語)を指定します。
使用するパッケージマネージャーを指定します。Project エイリアスを選択すると、JetBrains Rider は Node.js ページのデフォルトのプロジェクトパッケージマネージャーを使用します。関連するパッケージのエイリアス (npm または yarn) を選択したり、パッケージマネージャーのカスタムインストールへの明示的なパスを指定したりすることもできます。
Docker コンテナーでリモート Node.js インタープリターを使用している場合は、Docker コンテナーの設定フィールドのポートとボリュームのバインディング値を確認してください。
npm、pnpm、yarn と Docker とリモートノード .js インタープリターの構成の詳細を参照してください。

パッケージマネージャーのコマンドラインインターフェースの詳細については、npm 公式 Web サイト(英語)および Yarn オフィシャル Web サイト(英語)を参照してください。

スクリプトを実行してデバッグする

ツールバーのリストから新しく作成された実行構成を選択し、リストの横にあるまたはをクリックします。
スクリプト実行の結果は実行ツールウィンドウに表示されます。
をクリックすると、JetBrains Rider はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。

なんでも実行でスクリプトを実行する

なんでも実行は、スクリプトをすばやく開始する方法です。

Ctrl を 2 回押すか、ナビゲーションバーのをクリックします。なんでも実行ポップアップが開きます。
検索フィールドに npm run または yarn run を入力します。入力すると、JetBrains Rider は一致するスクリプトを表示します。リストから必要なものを選択し、Enter を押します。
コマンド出力を実行ツールウィンドウに表示するには、Ctrl+Enter を押し、出力をデバッグツールウィンドウに表示するには、Shift+Enter を押します。

起動時にスクリプトを自動的に実行する

定期的に実行するスクリプトがいくつかある場合は、対応する実行構成を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。

設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、ツール | スタートアップタスクに移動します。
開いた起動タスクページで、ツールバーのをクリックします。
リストから、必要な npm 実行構成を選択します。設定がリストに追加されます。
プロジェクトに適用可能な構成がない場合は、をクリックして実行構成の編集を選択します。次に、開いた実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。

起動前のタスクとしてスクリプトを実行する

メインメニューから実行 | 実行構成の編集を選択して実行 / デバッグ構成ダイアログダイアログを開き、リストから必要な構成を選択するか、をクリックして関連する実行構成タイプを選択して新規に作成します。
開いたダイアログで、起動前エリアのをクリックし、リストから npm スクリプトの実行を選択します。
開いた NPM スクリプトダイアログで、npm 実行 / デバッグ構成設定を指定します。

npm、pnpm、Docker の yarn

JetBrains Rider を使用すると、ローカルで行うのと同じ方法で、package.json を編集し、Docker コンテナー内のプロジェクトの依存関係をインストール、更新、削除できます。

Node.js、Node.js リモートインタープリター、Docker に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。
Docker の説明に従って、Docker をダウンロード、インストール、設定します。
Docker で Node.js リモートインタープリターを構成するまたは Docker Compose を介して、プロジェクトのデフォルトとして設定します。また、このリモートインタープリターに関連付けられているパッケージマネージャーがプロジェクトのデフォルトとして設定されていることを確認してください。
ローカル開発と同様に続行します: package.json を編集する、プロジェクトの依存関係を管理し、スクリプトを実行またはデバッグします。

最終更新日: 2024 年 6 月 17 日

JetBrains Rider 2024.1 ヘルプ