ツイートはてブ LINE Pocket

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 ファイルを選択します。デフォルトでは、PyCharm はプロジェクトのルートに package.json ファイルを表示します。別の package.json ファイルがある場合は、package.json を選択してくださいをクリックして表示されるダイアログで必要な package.json ファイルを選択します。PyCharm は、選択した package.json ファイルへのパスをそのタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

ツリーを再構築する

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

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

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

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

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

いくつかのスクリプトを実行する

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

ツールバー

	package.json を追加	このボタンをクリックして、別の package.json ファイルのスクリプトツリーを作成します。リストから必要な package.json ファイルを選択します。PyCharm は新しいノードを追加し、その下にスクリプトのツリーを構築します。
	package.json を削除	選択したノードにあるスクリプトのツリーを削除するには、このボタンをクリックします。
	スクリプトの再ロード	このボタンをクリックすると、選択したノードにあるスクリプトのツリーが再構築されます。npm はその場でツリーに変更を適用しないため、対応する package.json ファイルを更新した後にツリーを再構築する必要があるかもしれません。
	すべて折りたたむ	このボタンをクリックすると、すべてのスクリプトツリーが非表示になり、package.json ノードだけが表示されます。
		このボタンをクリックして、現在のビューを構成し、ツールウィンドウの表示モードを変更します。詳細については、ツールウィンドウの表示モードを参照してください。ほとんどのメニュー項目は、オンまたはオフにできるオプションであることに注意してください。オンになっているオプションには、名前の左側にチェックマークが付いています。NPM -specific オプションは次のとおりです。 npm 構成の編集 : npm 実行 / デバッグ構成ダイアログを開き、npm および Node インタープリターの現在の設定を更新するには、このオプションを選択します。npm、pnpm、Yarn を参照してください。並べ替え : スクリプトがツリーに表示される順序を構成するには、このオプションを選択します。ツールバーのをクリックし、メニューから並べ替えを選択してから、名前を選択します。デフォルトでは、ツリーには、package.json（オプション定義順序）で定義されている順序でスクリプトが表示されます。
	非表示	このボタンをクリックすると、ツールウィンドウが非表示になります。再度表示するには、メインメニューで表示 \| ツールウィンドウ \| npm を選択します。ツールウィンドウが再び表示され、以前に構築されたタスクのツリーがすべて表示されます。

ツリーのコンテキストメニュー

npm の設定	このメニュー項目を選択して、npm 設定ダイアログを開き、Node.js 構成を表示または編集します
ソースに移動	現在のツリーが構築されている package.json ファイルを開くには、このメニュー項目を選択します。
スクリプトの再ロード	選択したノードにあるスクリプトのツリーを再構築するには、このメニュー項目を選択します。
パスをコピー	現在のツリーがクリップボードに作成された package.json ファイルへのパスを保存するには、このメニュー項目を選択します。
package.json を削除	選択したノードにあるスクリプトのツリーを削除するには、このメニュー項目を選択します。

スクリプトのコンテキストメニュー

<スクリプト名> の実行	選択したスクリプトを実行するには、このメニュー項目を選択します。
編集 <script name> settings	このメニュー項目を選択すると、実行 / デバッグ構成ダイアログが開き、選択したスクリプトの事前定義された設定を編集できます。
ソースに移動	現在のツリーが構築されている package.json ファイルを開き、選択したスクリプトの定義に移動するには、このメニュー項目を選択します。

最終更新日: 2024 年 10 月 08 日

関連ページ：

npm、pnpm、Yarn

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

名前でターゲットを検索する (どこでも検索)

プロジェクト内またはプロジェクト外のアイテムは、その名前で見つけることができます。単一のエントリポイントから、Git 内のファイル、アクション、クラス、シンボル、設定、UI 要素などを検索できます。プロジェクト内のテキストの検索の詳細については、「プロジェクト内で検索して置き換える」を参照してください。どこでも検索メインメニューで、に移動するか、を 2 回押して検索ウィンドウを開きます。デフォルトでは、PyCharm は最近使用したファイルのリストを表示します。もう一度を 2 回押すか、ニー...

ツールウィンドウの表示モード

デフォルトでは、ツールウィンドウはメインウィンドウの端にアタッチされ、常に表示されています。たとえば、特定のツールウィンドウの表示モードを変更して、アクティブな場合にのみ表示したり、ツールウィンドウバーから切り離したりできます。ツールウィンドウの表示モードを変更するメインメニューでに移動し、表示モードを選択します。または、ツールウィンドウのヘッダーでクリックし、を選択して、表示モードを選択します。次のツールウィンドウの表示モードを使用できます。ドック (ピン留め): これは、ツールウィンドウが...

実行 / デバッグ構成: NPM

作成: このダイアログでは、npm および Yarn スクリプトをローカルで実行するための構成を作成します。現在のコンテキストにおける「ローカル」とは、PyCharm 自体がコンピューターにインストールされている Node.js を起動し、その後スクリプトの実行を開始することを意味します。npm、pnpm、Yarn の詳細を参照してください。スクリプトが開発モードでアプリケーションを起動する場合、構成を変更してデバッグセッションも開始することができます。これを行うには、ブラウザー / ライブ編集タブに移動し、...

階層ツールウィンドウ

階層ツールウィンドウを使用して、クラスの階層を分析および移動します。階層ツールウィンドウでリフレッシュアイコンをクリックすると、以前に構築した階層を更新できます。または、次の階層コマンドを実行すると結果が更新されます（に以前に構築された階層のいずれかでタブを固定していない場合）。ツールバーボタン：選択したクラスの親クラスと子クラスの両方を表示します。これには、結果のツリーで矢印が付いています。クラス階層現在のクラスの各スーパー型階層を表示します。クラス階層呼び出し階層

リモートホストツールウィンドウ

このツールウィンドウを使用して、対象の FTP/FTPS/SFTP サーバーのフォルダー構造とアップロードされたデータを表示します。リモートホストツールウィンドウを開く：。(以前にから開かれている場合にのみツールウィンドウリストで使用可能)。オプション：リモートホストツールウィンドウのオプションメニューには、一般オプションのほかに、ファイルサイズ、アクセス許可、最終変更日など、アップロードされたファイルに関するメタデータを表示するためのオプションが含まれています。ツールバー：リモートホスト