IntelliJ IDEA 2026.1 Help

npm、pnpm、Yarn

IntelliJ IDEA は npmpnpmYarnYarn 2 、Yarn 3、および Bun と連携します。},{ IDE 内の組み込みの ターミナルから、再利用可能なコードのパッケージをインストール、検索、更新、除去できます。

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

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

始める前に

  • Node.js をダウンロードしてインストールします。 npm もインストールされているため、これを使用する場合は、前の手順を完了してください。

  • Yarn を使用するには、 Yarn オフィシャル Web サイト(英語)の説明に従ってインストールしてください。

  • pnpm を使用するには、埋め込まれた ターミナルAlt+F12 )を開き、次のように入力します。

    npm install --g pnpm

    詳細については、 pnpm 公式 Web サイト(英語)を参照してください。

  • Bun を使用するには、 Bun オフィシャル Web サイト(英語)の説明に従ってインストールしてください。

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

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

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

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

プロジェクトに bun.lock または bun.lockb ファイルが含まれており、コンピューターに Bun がインストールされている場合、IntelliJ IDEA は現在のプロジェクトに npm ではなく Bun を使用することを提案します。

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

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 言語 & フレームワーク | JavaScript ランタイム に進みます。 JavaScript Runtime ページが開きます。

  2. パッケージマネージャー フィールドで、プロジェクトのパッケージマネージャーを指定します。

    プロジェクトパッケージマネージャーを選択: システムのデフォルトインストールを選択する
    • システムのデフォルトのインストールを使用するには、 すでに npmyarnpnpm 、または bun を選択します。

    • パッケージマネージャーのカスタムインストールを使用するには、 選択 をクリックし、関連するパッケージマネージャーのインストールフォルダーを選択します。

      プロジェクトパッケージマネージャーを選択: カスタムインストールを選択する

    Run/Debug Configuration: NPMダイアログの パッケージマネージャー リストから プロジェクト エイリアスを選択すると、IntelliJ IDEAは選択したパッケージマネージャーを自動的に使用します。 IntelliJ IDEA は、 'npm install' の実行/実行 'yarn install'/実行 'pnpm install' コマンドを呼び出したり、npm/Yarn/pnpm スクリプトを実行したりするたびに、選択したパッケージマネージャーへのパスも使用します。 詳細については、 スクリプトの実行とデバッグを参照してください。

新しいプロジェクトのデフォルトの IntelliJ IDEA パッケージマネージャーを設定する

  1. 新規プロジェクトの設定 ダイアログ(ファイル | 新規プロジェクトのセットアップ | 新規プロジェクトの設定 )を開き、 言語 & フレームワーク | JavaScript ランタイム に進みます。

  2. 開いた Node.js および NPM ページで、リストから必要なパッケージマネージャーを選択します。

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

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

  1. Yarn 1 がグローバルにインストールされていることを確認し、 Yarn オフィシャル Web サイト(英語)の説明に従って、プロジェクトで Yarn 2 を有効にします。 埋め込まれた ターミナル Alt+F12 を使用して、コマンドを入力します。

  2. 設定 ダイアログ(Ctrl+Alt+S )で、 言語 & フレームワーク | JavaScript ランタイム に移動し、 パッケージマネージャー リストからプロジェクト内の Yarn 2 パッケージへのパスを選択します。

package.json を編集する

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

  • パッケージ名についてはコード補完。

    パッケージ名についてはコード補完
  • 利用可能な最新のパッケージバージョンに関する情報。

    利用可能な最新のパッケージバージョンを表示する
  • npm install <package>@<version> または yarn add <package>@<version> を介してインストールできるバージョンの範囲に関する情報。 ` npm install または yarn install を実行すると、この範囲から入手可能な最新バージョンがインストールされます。

    Ctrl を押してバージョンにマウスオーバーすると、ツールチップに情報が表示されます。 セマンティックバージョニングの詳細については、 npm の公式ドキュメント(英語)を参照してください。

    利用可能なパッケージバージョンの範囲を表示する
  • 指定されたバージョンのパッケージがインストールされているかどうかの表示と、利用可能な最新バージョンに関する情報

    パッケージのバージョンがインストールされているかどうかの情報
  • 以前のパッケージバージョンのコード補完。 Ctrl+Space を押すか、最新のものとは異なるバージョンを入力し始めると、IntelliJ IDEA はパッケージの以前のすべてのバージョンを含む候補リストを表示します。

    以前のパッケージバージョンのコード補完
  • パッケージのクイックドキュメント検索。

    パッケージのクイックドキュメント検索

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

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

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

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

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

package.json から

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

  • ポップアップで 'npm install' の実行実行 'yarn install'実行 'pnpm install' リンクをクリックします。

    依存関係ポップアップをインストールする

    IntelliJ IDEA は、依存関係がまだインストールされていない場合、または依存関係が変更された場合に、このポップアップを表示します。 ポップアップを閉じるか 今後このメッセージを表示しない を選択してポップアップをオフにしても、 '<package_manager>のインストール' の実行 アクションまたは 内蔵ターミナルを使用して依存関係をインストールできます。

    IntelliJ IDEA が Node.js ランタイムを検出できない場合は、ポップアップでエラーが報告され、 Node.js インタープリターを構成するを実行できる JavaScript ランタイム ページへのリンクが表示されます。

    Node.js が見つかりません

    この通知を誤って閉じてしまい、元に戻したい場合は、 Ctrl+Shift+A を押して Enable notifications と入力し始め、リストから package.json の依存関係のインストールに関する通知を有効化する を選択します。

  • または、関連する package.json ファイルをエディターで開くか、 プロジェクト ツールウィンドウで選択して、コンテキストメニューから 'npm install' の実行 を選択します。

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

  • ポップアップで '<パッケージマネージャー> のインストール' の実行 をクリックします。

    依存関係の更新: ポップアップ

    プロジェクトを開いたり、バージョン管理から更新したり、 package.json を編集するたびに、IntelliJ IDEA はこのポップアップを表示します。

  • IntelliJ IDEA は、 dependencies または devDependencies からのパッケージがインストールされているかどうか、およびそれらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。 インスペクションが不一致を検出した場合、クイックフィックスを提案します。 適用するには、 '<パッケージマネージャー> のインストール' の実行 リンクをクリックします。

    インストールされているパッケージのバージョンが最新ではありません
  • IntelliJ IDEA は、新しいバージョンが利用可能なパッケージも検出し、パッケージバージョンにカーソルを合わせるとクイックフィックスを提供します。

    パッケージを最新バージョンに更新する: ツールチップ

    または、 Alt+Enter を押して、リストから <package> を最新バージョンに更新する を選択します。

    パッケージを最新バージョンに更新する: クイックフィックス

内蔵ターミナル

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

  • グローバルインストールの場合:

    • npm install&#xa0;--global <package_name>

    • yarn global add <package_name>

    • pnpm --global add <package_name>

  • パッケージをプロジェクト依存関係または開発依存関係としてインストールするには:

    • npm install&#xa0;--save <package_name> または npm install&#xa0;--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 の編集から詳細を参照してください。

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

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

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

Detect vulnerable packages and fix them in the editor

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

  • package.json ファイル内のハイライトされたパッケージにマウスを置きます。 ポップアップツールウィンドウには、検出された脆弱性の説明が表示されます。

  • クイックフィックスを適用するには、 More actions Alt+Enter をクリックして、関連する提案を選択します。

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

  1. インスペクションウィジェットで the Problems icon をクリックします。

  2. 問題 ツールウィンドウの ファイル タブには、アクティブなエディタータブで開かれている package.json の脆弱なパッケージがすべてリストされます。 各項目には説明が付いています。

    問題を解決するには、リストで脆弱なパッケージを選択し、ツールバーの the Yellow bulb icon をクリックするか、 Alt+Enter を押して、関連する提案を選択します。

  3. 脆弱性のある依存関係 タブには、プロジェクト内で検出されたすべての脆弱なパッケージがリストされます。

    問題ツールウィンドウ: 「脆弱な依存関係」タブ

    問題を修正するには、リストで脆弱なパッケージを選択し、右側のペインで 安全なバージョンをクリップボードにコピー リンクをクリックし、コピーしたバージョンを package.json に貼り付けます。

    結果の取得と問題の解決の詳細を参照してください。

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

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

  • これをオフにするには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 エディター | インスペクション に移動し、 セキュリティ ノードの 脆弱な宣言済みの依存関係 インスペクションの横にあるチェックボックスをオフにします。

  • あるいは、 設定 ダイアログ (Ctrl+Alt+S) を開き、 プラグイン に移動し、 パッケージチェッカー プラグインを見つけて、 無効化 をクリックします。

スクリプトを実行する

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

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

スクリプトのデバッグセッションを開始すると、IntelliJ IDEA は デバッグツールウィンドウを開きます。ここで、 スクリプトをステップ実行したり、スクリプトの実行を 停止および再開したり、 中断されたときにスクリプトを確認したり、 デバッガーコンソールで JavaScript コードスニペットを実行したりできます。

package.json からスクリプトを実行する

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

  • エディターで関連する package.json ファイルを開き、スクリプトの横のガターにある 実行ボタン をクリックして、コンテキストメニューから <スクリプト名> の実行 を選択します。

    package.json からスクリプトを実行 / デバッグする
  • Ctrl+Shift+F10 を押してスクリプトを実行することもできます。

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

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

npm ツールウィンドウからスクリプトを実行する

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

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

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

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

  • プロジェクト ツールウィンドウ(Alt+1 )で必要な ファイルを選択するか、エディターで開いてコンテキストメニューから npm スクリプトの表示 を選択します。

    nmp ツールウィンドウを開く

    すでに npm ツールウィンドウが開き、選択または開いた package.json ファイルに従って作成されたスクリプトツリーが表示されます。

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

  1. すでに npm ツールウィンドウで、ツールバーの 追加ボタン をクリックし、リストから必要な package.json ファイルを選択します。 デフォルトでは、IntelliJ IDEA はプロジェクトのルートに package.json ファイルを表示します。

  2. 別の package.json ファイルがある場合は、 package.json を選択する をクリックして表示されるダイアログで必要な package.json ファイルを選択します。 IntelliJ IDEA は、選択した package.json ファイルへのパスをタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

別のスクリプトツリーを構築する

ツリーを再構築する

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

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

  • ツールバーの 設定 をクリックし、メニューから 並べ替え を選択してから、 名前 を選択します。

    デフォルトでは、ツリーには、 package.json (オプション 定義順序 )で定義されている順序でスクリプトが表示されます。

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

  • スクリプトをダブルクリックしてください。

  • ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから <スクリプトマネージャー> の実行 を選択します。

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

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

    複数のスクリプトを実行する

実行構成によるスクリプトの実行

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

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

  1. 実行 | 実行構成の編集 に移動します。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

    構成の編集を開くダイアログ
  2. 開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (追加ボタン) をクリックし、リストから すでに npm を選択します。 実行 / デバッグ構成: npm ダイアログが開きます。

  3. 実行する CLI コマンド、実行するスクリプト(区切り文字として空白を使用)、およびこれらのスクリプトが定義されている package.json ファイルの場所を指定します。 必要に応じて、スクリプトを実行するための コマンドライン引数(英語)を入力します。

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

  5. 使用する Node.js ランタイムを指定します。

    プロジェクト エイリアスを選択すると、IntelliJ IDEA は JavaScript Runtime ページの Node runtime フィールドからプロジェクトの既定のインタープリターを自動で使用します。 ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のランタイムを検出し、フィールド自体に入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 参照ボタン をクリックして新しいインタープリターを構成することもできます。

    必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーター環境変数(英語)を指定します。

  6. 使用するパッケージマネージャーを指定します。 プロジェクト エイリアスを選択すると、IntelliJ IDEA は JavaScript Runtime ページのデフォルトのプロジェクトパッケージマネージャーを使用します。 関連するパッケージのエイリアス (npm または yarn) を選択したり、パッケージマネージャーのカスタムインストールへの明示的なパスを指定したりすることもできます。

  7. Docker コンテナーでリモート Node.js ランタイムを使用している場合は、自動生成された Docker コンテナーの設定を確認してください。 the Expand icon をクリックすると、ポップアップで設定が開きます。

    Docker コンテナーの設定を確認する

    npm、pnpm、yarn と Docker および リモート Node .js ランタイムの構成の詳細を参照してください。

スクリプトを実行する

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

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

  1. Ctrl を 2 回押すか、ナビゲーションバーの the Run Anything button をクリックします。 なんでも実行 ポップアップが開きます。

  2. 検索フィールドにパッケージマネージャーの名前を入力します。 入力すると、IntelliJ IDEA が一致するコマンドを表示します。

    なんでも実行: パッケージマネージャーの名前を入力する

    または、スクリプトの名前を入力します。

    なんでも実行: スクリプトの名前を入力する

    最後に、 ? と入力すると、コマンドのヒントのリストが表示されます。

    なんでも実行で使用可能なコマンドのリスト

    関連するヒントに移動し、 Space を押して使用可能なコマンドのリストを取得し、リストから必要なコマンドを選択して、 Enter を押します。

    コマンド出力を 実行 ツールウィンドウに表示するには、 Ctrl+Enter を押し、出力を デバッグ ツールウィンドウに表示するには、 Shift+Enter を押します。

    Run an npm command in the Run or Debug tool window from the Run Anything popup

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

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

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 ツール | スタートアップタスク に進みます。

  2. 開いた 起動タスクページで、ツールバーの 追加ボタン をクリックします。

  3. リストから、必要な npm 実行構成を選択します。 設定がリストに追加されます。

    プロジェクトに適用可能な構成がない場合は、 the Add button` をクリックして 実行構成の編集 を選択します。 次に、開いた 実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。 新しい設定を保存すると、自動的に起動タスクのリストに追加されます。

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

  1. メインメニューから 実行 | 実行構成の編集 を選択して 実行 / デバッグ構成ダイアログ ダイアログを開き、リストから必要な構成を選択するか、 新規構成の追加 をクリックして関連する実行構成タイプを選択して新規に作成します。

  2. 開いたダイアログで、 起動前 エリアの 追加 をクリックし、リストから npm スクリプトの実行 を選択します。

  3. 開いた NPM スクリプト ダイアログで、 npm 実行 / デバッグ構成設定を指定します。

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

npm、Yarn、pnpm のスクリプトは、エディター内の package.json ファイル、専用の すでに npm ツールウィンドウ内のスクリプトツリー、または専用の実行構成からデバッグを開始できます。

いずれの場合も、IntelliJ IDEA は デバッグツールウィンドウを開きます。ここで、 スクリプトのステップ実行停止と再開中断時の検査デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。

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

IntelliJ IDEA は package.json ファイルから単一のスクリプト用にデバッグセッションをすばやく開始できます。 いくつかのスクリプトをデバッグするには、実行構成または すでに npm ツールウィンドウを使用します。

  • エディターで関連する package.json ファイルを開き、スクリプトの横のガターにある 実行ボタン をクリックして、コンテキストメニューから デバッグ <script_name> を選択します。

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

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

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

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

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

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

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

  • プロジェクト ツールウィンドウ(Alt+1 )で必要な ファイルを選択するか、エディターで開いてコンテキストメニューから npm スクリプトの表示 を選択します。

    nmp ツールウィンドウを開く

    すでに npm ツールウィンドウが開き、選択または開いた package.json ファイルに従って作成されたスクリプトツリーが表示されます。

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

  1. すでに npm ツールウィンドウで、ツールバーの 追加ボタン をクリックし、リストから必要な package.json ファイルを選択します。 デフォルトでは、IntelliJ IDEA はプロジェクトのルートに package.json ファイルを表示します。

  2. 別の package.json ファイルがある場合は、 package.json を選択する をクリックして表示されるダイアログで必要な package.json ファイルを選択します。 IntelliJ IDEA は、選択した package.json ファイルへのパスをタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

別のスクリプトツリーを構築する

ツリーを再構築する

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

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

  • ツールバーの 設定 をクリックし、メニューから 並べ替え を選択してから、 名前 を選択します。

    デフォルトでは、ツリーには、 package.json (オプション 定義順序 )で定義されている順序でスクリプトが表示されます。

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

いくつかのスクリプトをデバッグする

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

    複数のスクリプトをデバッグする

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

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

  1. 実行 | 実行構成の編集 に移動します。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

    構成の編集を開くダイアログ
  2. 開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (追加ボタン) をクリックし、リストから すでに npm を選択します。 実行 / デバッグ構成: npm ダイアログが開きます。

  3. 実行する CLI コマンド、実行するスクリプト(区切り文字として空白を使用)、およびこれらのスクリプトが定義されている package.json ファイルの場所を指定します。 必要に応じて、スクリプトを実行するための コマンドライン引数(英語)を入力します。

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

  5. 使用する Node.js ランタイムを指定します。

    プロジェクト エイリアスを選択すると、IntelliJ IDEA は JavaScript Runtime ページの Node runtime フィールドからプロジェクトの既定のインタープリターを自動で使用します。 ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のランタイムを検出し、フィールド自体に入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 参照ボタン をクリックして新しいインタープリターを構成することもできます。

    必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーター環境変数(英語)を指定します。

  6. 使用するパッケージマネージャーを指定します。 プロジェクト エイリアスを選択すると、IntelliJ IDEA は JavaScript Runtime ページのデフォルトのプロジェクトパッケージマネージャーを使用します。 関連するパッケージのエイリアス (npm または yarn) を選択したり、パッケージマネージャーのカスタムインストールへの明示的なパスを指定したりすることもできます。

  7. Docker コンテナーでリモート Node.js ランタイムを使用している場合は、自動生成された Docker コンテナーの設定を確認してください。 the Expand icon をクリックすると、ポップアップで設定が開きます。

    Docker コンテナーの設定を確認する

    npm、pnpm、yarn と Docker および リモート Node.js ランタイムの構成の詳細を参照してください。

  8. ツールバーの 実行 ウィジェットから新しく作成された実行構成を選択し、その横にある デバッグ をクリックします。

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

npm、pnpm、Docker の yarn

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

  1. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに Node.js リモートインタープリタープラグインをインストールして有効にします。

  2. 設定 | プラグイン ページのタブ インストール済み で、 Node.js および Docker 必要なプラグインが有効になっていることを確認してください。 詳細は、 プラグインの管理を参照してください。

  3. Docker の説明に従って Dockerをダウンロード、インストール、および構成します。

  4. Docker で Node.js リモートランタイムを構成するまたは Docker Compose を介して、プロジェクトの デフォルトとして設定します。 また、このリモートランタイムに関連付けられたパッケージマネージャーが プロジェクトのデフォルトとして設定されていることを確認してください。

  5. ローカル開発と同様に、 package.json を編集しプロジェクトの依存関係を管理しスクリプトを実行またはデバッグします

2026 年 3 月 30 日