npm、pnpm、Yarn
IntelliJ IDEA は npm(英語)、pnpm(英語)、Yarn(英語)、Yarn 2(英語)、Yarn 3 と統合されているため、組み込みのターミナルで、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 サイト(英語)を参照してください。
プロジェクトパッケージマネージャーを選択する
IntelliJ IDEA を使用すると、プロジェクトで npm、Yarn、Yarn 2、または pnpm のいずれを使用するかを選択できます。
デフォルトでは、IntelliJ IDEA は npm を提案します。ただし、yarn.lock ファイルを含むプロジェクトを開き、コンピューターに Yarn がインストールされている場合、IntelliJ IDEA はこのプロジェクトのパッケージマネージャーを自動的に Yarn に変更します。
pnpm-lock ファイルを使用してプロジェクトを開き、pnpm がコンピューターにインストールされている場合、IntelliJ IDEA はこのプロジェクトのパッケージマネージャーを自動的に pnpm に変更します。
Yarn 1 または pnpm をデフォルトの IntelliJ IDEA パッケージマネージャーとして設定するも使用できます。
設定ダイアログ(Ctrl+Alt+S)で、 に移動します。Node.js ページが開きます。
パッケージマネージャーフィールドで、プロジェクトのパッケージマネージャーを指定します。
システムのデフォルトのインストールを使用するには、npm、yarn、または pnpm を選択します。
パッケージマネージャーのカスタムインストールを使用するには、選択をクリックし、関連するパッケージマネージャーのインストールフォルダーを選択します。
実行 / デバッグ構成: NPM ダイアログのパッケージマネージャーリストから
Project
エイリアスを選択すると、IntelliJ IDEA は選択したパッケージマネージャーを自動的に使用します。IntelliJ IDEA は、'npm install' の実行 / 実行 'yarn install'/ 実行 'pnpm install' コマンドを呼び出したり、npm/Yarn/pnpm スクリプトを実行したりするたびに、選択したパッケージマネージャーへのパスも使用します。詳細については、スクリプトの実行とデバッグを参照してください。
プロジェクトで Yarn 2 を設定する
Yarn 1 がグローバルにインストールされていることを確認し、Yarn オフィシャル Web サイト(英語)の説明に従って、プロジェクトで Yarn 2 を有効にします。埋め込まれたターミナル Alt+F12 を使用して、コマンドを入力します。
設定ダイアログ(Ctrl+Alt+S)で、 に移動し、パッケージマネージャーリストからプロジェクト内の Yarn 2 パッケージへのパスを選択します。
Yarn 1 または pnpm をデフォルトの IntelliJ IDEA パッケージマネージャーとして設定する
新規プロジェクトの設定ダイアログ( )を開き、 に進みます。
開いた Node.js および NPM ページで、パッケージマネージャーリストから
yarn
またはpnpm
を選択します。
その後、IntelliJ IDEA は、新しいプロジェクトを作成するたびに、選択されたパッケージマネージャー(Yarn または pnpm)をデフォルトとして提案します。
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、または Node.js ページにインストールできます。
package.json から
プロジェクトの依存関係をインストールする
ポップアップで 'npm install' の実行、実行 'yarn install'、実行 'pnpm install' リンクをクリックします。
IntelliJ IDEA は、依存関係がまだインストールされていない場合、または依存関係が変更された場合に、このポップアップを表示します。ポップアップを閉じるか今後このメッセージを表示しないを選択してポップアップをオフにしても、実行 '<package_manager> install' アクションまたは内蔵ターミナルを使用して依存関係をインストールできます。
IntelliJ IDEA が Node.js インタープリターを検出できない場合は、ポップアップでエラーが報告され、Node.js インタープリターを構成するを実行できる Node.js ページへのリンクが表示されます。
この通知を誤って閉じてしまい、元に戻したい場合は、Ctrl+Shift+A を押して
Enable notifications
と入力し始め、リストから package.json の依存関係のインストールに関する通知を有効化するを選択します。または、関連する package.json ファイルをエディターで開くか、プロジェクトツールウィンドウで選択して、コンテキストメニューから 'npm install' の実行を選択します。
プロジェクトの依存関係を更新する
ポップアップで実行 '<package manager> install' をクリックします。
プロジェクトを開いたり、バージョン管理から更新したり、package.json を編集するたびに、IntelliJ IDEA はこのポップアップを表示します。
IntelliJ IDEA は、
dependencies
またはdevDependencies
からのパッケージがインストールされているかどうか、およびそれらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。インスペクションが不一致を検出した場合、クイックフィックスを提案します。適用するには、実行 '<package manager> install' リンクをクリックします。IntelliJ IDEA は、新しいバージョンが利用可能なパッケージも検出し、パッケージバージョンにカーソルを合わせるとクイックフィックスを提供します。
または、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 の編集から詳細を参照してください。
脆弱なパッケージを検出する
IntelliJ IDEA は、CheckmarxSCA データベース(英語)と全国脆弱性データベース(英語)を調べて、プロジェクトで使用されているパッケージの脆弱性を検出します。コードを作成すると、IDE は脆弱性があると考えられるパッケージをハイライトし、その説明を提供し、可能な場合は修正を提案します。検出された脆弱なパッケージのリスト全体が問題ツールウィンドウに表示されます。
脆弱性チェックは、パッケージチェッカー(英語)プラグインに依存する脆弱な宣言済みの依存関係 コードインスペクションによって処理されます。このプラグインは、アプリケーションセキュリティリーダーである Checkmarx(英語) によって提供されています。このプラグインは IntelliJ IDEA にバンドルされており、デフォルトで有効になっています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。詳細については、プラグイン設定を開くを参照してください。

エディターでパッケージの脆弱性の問題を解決する
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 スクリプトの出力、エラーの報告、見つからなかったパッケージまたはプラグインの一覧などが表示されます。最後に実行されたスクリプトの名前がツールウィンドウのタイトルバーに表示されます。
スクリプトのデバッグセッションを開始すると、IntelliJ IDEA はデバッグツールウィンドウを開きます。ここで、スクリプトをステップ実行したり、スクリプトの実行を停止および再開したり、中断されたときにスクリプトを調べたり、デバッガーコンソールで JavaScript コードスニペットを実行したりできます。
package.json からスクリプトを実行してデバッグする
IntelliJ IDEA は package.json ファイルから単一のスクリプトをすばやく起動させます。いくつかのスクリプトを実行またはデバッグするには、実行構成または npm ツールウィンドウを使用します。
エディターで関連する 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 スクリプトの表示を選択します。
npm ツールウィンドウが開き、選択または開いた package.json ファイルに従って作成されたスクリプトツリーが表示されます。
すでに開いている npm ツールウィンドウでスクリプトのツリーを構築する
npm ツールウィンドウで、ツールバーの
をクリックして、リストから必要な package.json ファイルを選択します。デフォルトでは、IntelliJ IDEA はプロジェクトのルートに package.json ファイルを表示します。
別の package.json ファイルがある場合は、package.json を選択してくださいをクリックして表示されるダイアログで必要な package.json ファイルを選択します。IntelliJ IDEA は、選択した package.json ファイルへのパスをタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のスクリプトを名前でソートする
ツールバーの
をクリックし、メニューから並べ替えを選択してから、名前を選択します。
デフォルトでは、ツリーには、package.json(オプション定義順序)で定義されている順序でスクリプトが表示されます。
1 つのスクリプトを実行する
スクリプトをダブルクリックしてください。
ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから <スクリプト名> の実行を選択します。
1 つのスクリプトをデバッグする
ツリー内のスクリプトを選択して、コンテキストメニューからデバッグ <スクリプト名> を選択します。
IntelliJ IDEA はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。
複数のスクリプトを実行またはデバッグする
複数選択モードを使用します。Shift (隣接するアイテムの場合)または Ctrl (隣接しないアイテムの場合)キーを押しながら必要なスクリプトを選択してから、選択のコンテキストメニューから実行またはデバッグを選択します。
実行構成によるスクリプトの実行とデバッグ
エディターまたは npm ツールウィンドウからスクリプトを実行またはデバッグすると、IntelliJ IDEA は一時的な実行構成を自動的に作成します。使用する以外に、独自の npm 実行構成を作成して起動できます。
NPM の実行 / デバッグ構成を作成する
実行ウィジェットから実行構成の編集を選択します。
に移動します。または、ツールバーの開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから npm を選択します。実行 / デバッグ構成: npm ダイアログが開きます。
実行する CLI コマンド、実行するスクリプト(区切り文字として空白を使用)、およびこれらのスクリプトが定義されている package.json ファイルの場所を指定します。必要に応じて、スクリプトを実行するためのコマンドライン引数(英語)を入力します。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、IntelliJ IDEA は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。
必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーターと環境変数(英語)を指定します。
使用するパッケージマネージャーを指定します。
Project
エイリアスを選択すると、IntelliJ IDEA は Node.js ページのデフォルトのプロジェクトパッケージマネージャーを使用します。関連するパッケージのエイリアス (npm または yarn) を選択したり、パッケージマネージャーのカスタムインストールへの明示的なパスを指定したりすることもできます。Docker コンテナーでリモート Node.js インタープリターを使用している場合は、Docker コンテナーの設定フィールドのポートとボリュームのバインディング値を確認してください。
npm、pnpm、yarn と Docker とリモートノード .js インタープリターの構成の詳細を参照してください。
パッケージマネージャーのコマンドラインインターフェースの詳細については、npm 公式 Web サイト(英語)および Yarn オフィシャル Web サイト(英語)を参照してください。
スクリプトを実行してデバッグする
ツールバーの実行ウィジェットから、新しく作成された実行構成を選択し、その横にある
または
をクリックします。
スクリプト実行の結果は実行ツールウィンドウに表示されます。
をクリックすると、IntelliJ IDEA はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。
なんでも実行でスクリプトを実行する
なんでも実行は、スクリプトをすばやく開始する方法です。
Ctrl を 2 回押すか、ナビゲーションバーの
をクリックします。なんでも実行ポップアップが開きます。
検索フィールドに
npm run
またはyarn run
を入力します。入力すると、IntelliJ IDEA は一致するスクリプトを表示します。リストから必要なものを選択し、Enter を押します。コマンド出力を実行ツールウィンドウに表示するには、Ctrl+Enter を押し、出力をデバッグツールウィンドウに表示するには、Shift+Enter を押します。
起動時にスクリプトを自動的に実行する
定期的に実行するスクリプトがいくつかある場合は、対応する実行構成を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。
設定ダイアログ(Ctrl+Alt+S)で、 に移動します。
開いた起動タスクページで、ツールバーの
をクリックします。
リストから、必要な npm 実行構成を選択します。設定がリストに追加されます。
プロジェクトに適用可能な構成がない場合は、
をクリックして実行構成の編集を選択します。次に、開いた実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。
起動前のタスクとしてスクリプトを実行する
メインメニューから実行 / デバッグ構成ダイアログダイアログを開き、リストから必要な構成を選択するか、
を選択してをクリックして関連する実行構成タイプを選択して新規に作成します。
開いたダイアログで、起動前エリアの
をクリックし、リストから npm スクリプトの実行を選択します。
開いた NPM スクリプトダイアログで、npm 実行 / デバッグ構成設定を指定します。
npm、pnpm、Docker の yarn
IntelliJ IDEA を使用すると、ローカルで行うのと同じ方法で、package.json を編集し、Docker コンテナー内のプロジェクトの依存関係をインストール、更新、削除できます。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Node.js リモートインタープリタープラグインをインストールして有効にします。
設定 | プラグインページのインストール済みタブで、Node.js および Docker に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Docker の説明に従って、Docker をダウンロード、インストール、設定します。
Docker で Node.js リモートインタープリターを構成するまたは Docker Compose を介して、プロジェクトのデフォルトとして設定します。また、このリモートインタープリターに関連付けられているパッケージマネージャーがプロジェクトのデフォルトとして設定されていることを確認してください。
ローカル開発と同様に続行します: package.json を編集する、プロジェクトの依存関係を管理し、スクリプトを実行またはデバッグします。
関連ページ:

ターミナル
IntelliJ IDEA には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。これを使用して、専用のターミナルアプリケーションに切り替えることなく、Java ツール、Git コマンドの実行、ファイル権限の設定、その他のコマンドラインタスクの実行を行います。ターミナルプラグインを有効にするこの機能は、デフォルトで IntelliJ IDEA にバンドルされて有効になっているターミナルプラグインに依存しています。関連する機能が利用できない場合は、...

Node.js
このページは、プラグインのインストールに従って、設定 | プラグインページのインストール済みタブで Node.js バンドルプラグインが有効になっている場合にのみ表示されます。Node.js の操作方法については、Node.js アプリケーションの開発セクションを参照してください。次の Node.js バージョンは、IntelliJ IDEA 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン...

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

コードインスペクション
IntelliJ IDEA には、プロジェクトをコンパイルする前に、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ(たとえば、本番コードまたは変更されたファイルでのみ)コードをスキャンできます。すべてのインスペクションには、問題がコ...

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

結果の取得と問題の解決
インスペクションがあなたのコードに問題を検出した場合、すぐにエディターで修正を適用することができます。ハイライトされたコード部分にキャレットを置き、を押します。IntelliJ IDEA では、一部のインスペクションのクイックフィックスの横に対話型プレビューが表示されます。を押すと、このプレビューを非表示にしたり表示したりできます。問題ツールウィンドウで修正を適用する:インスペクションを手動で起動した場合は、解析が終了した後に自動的に開く問題ツールウィンドウで結果を調べることができます。検