NPM ウィンドウ
ツールウィンドウを npm、pnpm、Yarn スクリプトを実行するに使用します。
始める前に
Node.js をダウンロードしてインストールします。npm もインストールされることに注意してください。使用する場合は、事前の手順は完了しています。
Yarn を使用するには、Yarn オフィシャル Web サイト(英語)の説明に従ってインストールしてください。
スクリプトの実行
ソリューションエクスプローラーで package.json ファイルを選択するか、エディターで開いてコンテキストメニューから npm スクリプトの表示を選択すると、npm ツールウィンドウが開きます。
npm、pnpm、Yarn を呼び出すとすぐに、ツールは、呼び出された package.json ファイルの scripts
プロパティ内で定義されたスクリプトのツリーの構築を開始します。
プロジェクトに複数の package.json ファイルがある場合は、それらごとに個別のスクリプトツリーを構築し、以前に構築したツリーを削除せずにスクリプトを実行できます。各ツリーは、個別のノードに表示されます。
ツールウィンドウには、スクリプト出力が表示され、エラーが発生したことが報告され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたスクリプトの名前がツールウィンドウのタイトルバーに表示されます。
スクリプトのツリーを構築するには、次のいずれかを実行する
ソリューションエクスプローラーで必要な 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> を選択します。
いくつかのスクリプトを実行する
複数選択モードを使用します。Shift (隣接するアイテムの場合)または Ctrl (隣接しないアイテムの場合)キーを押しながら必要なスクリプトを選択してから、選択のコンテキストメニューから実行またはデバッグを選択します。
ツールバー
| package.json を追加 | このボタンをクリックして、別の package.json ファイルのスクリプトツリーを作成します。リストから必要な package.json ファイルを選択します。JetBrains Rider は新しいノードを追加し、その下にスクリプトのツリーを構築します。 |
| package.json を削除 | 選択したノードにあるスクリプトのツリーを削除するには、このボタンをクリックします。 |
| スクリプトの再ロード | このボタンをクリックすると、選択したノードにあるスクリプトのツリーが再構築されます。npm はその場でツリーに変更を適用しないため、対応する package.json ファイルを更新した後にツリーを再構築する必要があるかもしれません。 |
| すべて折りたたむ | このボタンをクリックすると、すべてのスクリプトツリーが非表示になり、package.json ノードだけが表示されます。 |
| このボタンをクリックして、現在のビューを構成し、ツールウィンドウの表示モードを変更します。詳細については、ツールウィンドウの表示モードを参照してください。 ほとんどのメニュー項目は、オンまたはオフにできるオプションであることに注意してください。オンになっているオプションには、名前の左側にチェックマークが付いています。NPM -specific オプションは次のとおりです。
| |
| 非表示 | このボタンをクリックすると、ツールウィンドウが非表示になります。再度表示するには、メインメニューで を選択します。ツールウィンドウが再び表示され、以前に構築されたタスクのツリーがすべて表示されます。 |
ツリーのコンテキストメニュー
npm の設定 | このメニュー項目を選択して、npm 設定ダイアログを開き、Node.js 構成を表示または編集します |
ソースに移動 | 現在のツリーが構築されている package.json ファイルを開くには、このメニュー項目を選択します。 |
スクリプトの再ロード | 選択したノードにあるスクリプトのツリーを再構築するには、このメニュー項目を選択します。 |
パスをコピー | 現在のツリーがクリップボードに作成された package.json ファイルへのパスを保存するには、このメニュー項目を選択します。 |
package.json を削除 | 選択したノードにあるスクリプトのツリーを削除するには、このメニュー項目を選択します。 |
スクリプトのコンテキストメニュー
実行 <script name> | 選択したスクリプトを実行するには、このメニュー項目を選択します。 |
編集 <script name> settings | このメニュー項目を選択すると、実行 / デバッグ構成ダイアログが開き、選択したスクリプトの事前定義された設定を編集できます。 |
ソースに移動 | 現在のツリーが構築されている package.json ファイルを開き、選択したスクリプトの定義に移動するには、このメニュー項目を選択します。 |
関連ページ:
![](https://resources.jetbrains.com/help/img/rider/2024.1/ws_package_manager_configuration_select_package_manager.png)
npm、pnpm、Yarn
JetBrains Rider は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。JetBrains Rider では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。JetBrains Rider は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと...
![](https://pleiades.io/icons/rider.png)
どこでも検索
このコマンドを使用して、タイプ、シンボル、ファイル、最近のファイル、出現するテキスト、アクション、ツールウィンドウ、実行構成、設定、Git ブランチ、コミット、タグ、メッセージなどの宛先に移動します。この機能を呼び出すとすぐに提案のリストが表示され、最初に最近のファイルが含まれます。検索を開始する:以下のいずれか 1 つを実行します: を押します。Shift を 2 回押します。Rider ウィンドウの右上隅にあるをクリックします。、表示されたどこでも検索リストで、項目名の入力を始めます。入力する...
![](https://resources.jetbrains.com/help/img/rider/2024.1/ws_npm_docker_run_configuration_docker_container_settings.png)
実行 / デバッグ構成: NPM
作成: このダイアログでは、npm および Yarn スクリプトをローカルで実行するための構成を作成します。現在のコンテキストにおける「ローカル」とは、JetBrains Rider 自体がコンピューターにインストールされている Node.js を起動し、その後スクリプトの実行を開始することを意味します。スクリプトが開発モードでアプリケーションを起動する場合、構成を変更してデバッグセッションも開始することができます。これを行うには、ブラウザー / ライブ編集タブに移動し、アプリケーションが実行される URL...
![](https://resources.jetbrains.com/help/img/rider/2024.1/documentation_window.png)
ドキュメントツールウィンドウ
デフォルトでは、JetBrains Rider はポップアップにクイックドキュメントを表示します。ツールウィンドウで表示するには、ポップアップでクリックしてドキュメントツールウィンドウで開くを選択するか、を 2 回押します。または前のページに切り替えるか、次のドキュメントページに移動します(たとえば、ハイパーリンクをクリックした後)。macOS では、3 本の指で右から左、左から右にスワイプするジェスチャーも使用できます。ドキュメントが現在開いているシンボルのソースコードに移動します。ドキュ...
![](https://resources.jetbrains.com/help/img/rider/2024.1/ws_ts_typescript_tw_save_errors.png)
TypeScript ウィンドウ
TypeScript ツールウィンドウには、TypeScript コードのコンパイルエラーが一覧表示されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。JetBrains Rider は、言語およびフレームワーク: TypeScript に従って、TypeScript ページで TypeScript 言語サービスがアクティブ化されている場合にのみ TypeScript ツールウィンドウを表示します。ツールウィンドウは、最初に TypeScript...