npm、pnpm、Yarn

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

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

  

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

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

  

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

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

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

• ポップアップで実行 '<package manager> install' をクリックします。

  

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

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

  

• PhpStorm は、新しいバージョンが利用可能なパッケージも検出し、パッケージバージョンにカーソルを合わせるとクイックフィックスを提供します。

  

  または、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 の編集から詳細を参照してください。

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

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

• クイックフィックスを適用するには、その他のアクション Alt+Enter をクリックして、関連する提案を選択します。

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

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

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

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

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

   

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

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

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

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

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

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

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

  

• Ctrl+Shift+F10 を押してスクリプトを実行することもできます。

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

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

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

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

  

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

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

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

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

ツリーを再構築する

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

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

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

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

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

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

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

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

• ツリー内のスクリプトを選択して、コンテキストメニューからデバッグ <スクリプト名> を選択します。

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

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

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

  

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

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

   

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

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

4. 使用する Node.js インタープリターを指定します。

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

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

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

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

6. Docker コンテナーでリモート Node.js インタープリターを使用している場合は、Docker コンテナーの設定フィールドのポートとボリュームのバインディング値を確認してください。

   

   npm、pnpm、yarn と Docker とリモートノード .js インタープリターの構成の詳細を参照してください。

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

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

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

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

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

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

2. 検索フィールドに npm run または yarn run を入力します。入力すると、PhpStorm は一致するスクリプトを表示します。リストから必要なものを選択し、Enter を押します。

   

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

   

1. 設定ダイアログ（Ctrl+Alt+S）で、ツール | スタートアップタスクに移動します。

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

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

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

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

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

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