PhpStorm 2020.2 ヘルプ

npm、pnpm、および Yarn

PhpStorm は npm(英語)Yarn(英語)Yarn 2(英語)、および pnpm(英語) と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。

PhpStorm では、npm スクリプト(英語)実行およびデバッグ(英語)することもできます。PhpStorm は、package.json ファイルを解析し、スクリプトの定義を認識して、スクリプトをツリービューに表示し、ツリー内のスクリプトと package.json ファイル内のその定義の間を移動できるようにします。

PhpStorm は、Yarn ワークスペース(英語)を使用してプロジェクトを検出し、ワークスペースの package.json ファイルにリストされているが、ルート node_modules フォルダーにあるすべての依存関係にインデックスを付けます。

始める前に

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

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

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

    npm install --g pnpm

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

プロジェクトパッケージマネージャーの選択

PhpStorm では、プロジェクトで npm、Yarn、Yarn 2、または pnpm を使用するかどうかを選択できます。デフォルトでは、PhpStorm は npm を提案します。ただし、yarn.lock ファイルを使用してプロジェクトを開き、Yarn がマシンにインストールされている場合、PhpStorm はこのプロジェクトのパッケージマネージャーを Yarn に自動的に変更します。Yarn 1 をデフォルトの PhpStorm パッケージマネージャーとして設定するも使用できます。

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。Node.js および NPM ページが開きます。

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

    Select project package manager
    • システムのデフォルトのインストールを使用するには、npm または yarn を選択します。

    • pnpm を使用するには、リストからインストールフォルダーへのパスを選択します。

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

      Select project package manager

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

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

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

  2. 設定 / 環境設定ダイアログ Ctrl+Alt+S言語およびフレームワーク | Node.js および NPM に移動し、パッケージマネージャーリストからプロジェクトの Yarn 2 パッケージへのパスを選択します。

Yarn 1 または pnpm をデフォルトの PhpStorm パッケージマネージャーとして設定する

  1. 新規プロジェクトの設定ダイアログ(ファイル | 新規プロジェクトの設定)を開き、言語およびフレームワーク | Node.js および NPM に進みます。

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

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

package.json の編集

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

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

    Code completion for package names
  • 利用可能な最新のパッケージバージョンに関する情報。

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

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

    Showing the range of available package versions
  • 以前のパッケージバージョンのコード補完。 Ctrl+Space を押すか、最新のものとは異なるバージョンを入力し始めると、PhpStorm はパッケージの以前のすべてのバージョンを含む候補リストを表示します。

    Code completion for previous package versions
  • パッケージのクイックドキュメント検索。

    Quick documentation look-up for packages

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

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

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

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

PhpStorm では、パッケージはエディターに、package.json ファイルから、組み込みターミナルAlt+F12)に、または Node.js と npm ページにインストールできます。

package.json から

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

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

    Install dependencies popup

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

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

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

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

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

    Update dependencies: popup

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

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

    Installed version of a package is not up to date

内蔵ターミナル

埋め込まれたターミナル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 の編集からさらに学びましょう。

Node.js と NPM ページ

PhpStorm は、Node.js と NPM ページに現在インストールされているすべてのパッケージを表示します。ページを開くには、設定 / 環境設定ダイアログ Ctrl+Alt+S言語およびフレームワーク | Node.js および NPM に移動します。

グローバルにインストールされたパッケージが一番上に表示されます。各パッケージについて、PhpStorm は現在インストールされているバージョンと利用可能な最新バージョンを表示します。

パッケージをインストールする

  1. the Add button をクリックして表示される使用可能なパッケージダイアログで、必要なパッケージを選択します。

  2. デフォルトでは、最新のパッケージバージョンがインストールされています。別のものをインストールするには、バージョン指定チェックボックスを選択してリストから必要なバージョンを選択します。

  3. デフォルトのインストールはローカルです。別のインストールタイプを使用するには、オプションチェックボックスを選択し、グローバルインストールの場合は -g を、依存関係 / 開発依存関係としてパッケージをインストールするには --save / --save-dev を入力します。npm(英語)Yarn(英語) の公式 Web サイトで詳細を参照してください。

パッケージの場所を表示する

  • パッケージ名の上にマウスポインタを置きます。PhpStorm はパッケージへのパスをツールチップに表示します。

パッケージを最新バージョンに更新する

  • リストからパッケージを選択してthe Upgrade buttonをクリックします。

パッケージを削除する

  • リストからパッケージを選択してthe Uninstall (Delete) buttonをクリックします。

スクリプトの実行とデバッグ

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

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

スクリプトのデバッグセッション中に、PhpStorm はデバッグツールウィンドウを開き、プログラムのステップ実行、プログラムの実行の一時停止と再開一時停止 のプログラムの調査実際の HTML DOM の表示などを行うことができます。

package.json からのスクリプトの実行とデバッグ

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

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

    Run/debug a script from package.json
  • Ctrl+Shift+F10 を押してスクリプトを実行することもできます。

npm ツールウィンドウからのスクリプトの実行とデバッグ

プロジェクトツールウィンドウで package.json ファイルを選択するか、エディターでファイルを開き、コンテキストメニューから npm スクリプトの表示を選択すると、ツールウィンドウが開きます。npm または Yarn を呼び出すとすぐに、それが呼び出された package.json ファイルの scripts プロパティ内で定義されたスクリプトのツリーの構築を開始します。プロジェクトに複数の package.json ファイルがある場合は、それぞれに個別のスクリプトツリーを作成し、以前に作成したツリーを削除せずにスクリプトを実行できます。各ツリーは個別のノードに表示されます。

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

  • プロジェクトツールウィンドウで必要な package.json ファイルを選択するか、エディターで開き、コンテキストメニューから npm スクリプトの表示を選択します。npm ツールウィンドウが開き、選択または開いた package.json ファイルに従って構築されたスクリプトツリーが表示されます。

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

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

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

ツリーを再構築する

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

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

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

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

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

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

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

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

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

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

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

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

  1. メインメニューから実行 | 構成の編集を選択します。

  2. ツールバーのthe Add buttonをクリックし、リストから npm を選択します。実行 / デバッグ構成 : npm ダイアログが開きます。

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

  4. 使用する Node.js インタープリターを指定してください。これはローカル Node.js インタープリターまたは Windows Subsystem for Linux の Node.js です。

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

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

  6. ツールバーのリストから新しく作成された実行構成を選択し、Runをクリックします。出力は実行ツールウィンドウに表示されます。

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

なんでも実行は、npm および yarn スクリプトをすばやく起動する方法です。

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

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

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

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

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、ツール | 開始タスクに移動します。

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

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

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

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

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

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

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

最終更新日 :

関連ページ:

Node.js および NPM

Windows および Linux 用のファイル | 設定 | 言語およびフレームワーク | Node.js および NPMmacOSのPhpStorm | 環境設定 | 言語およびフレームワーク | Node.js および NPMこのページは、JetBrains リポジト...

ターミナル

PhpStorm には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Git コマンドの実行、ファイルのアクセス許可の設定、その他のコマンドラインタスクの実行に使用します。ターミナルエミュレータ...

デバッグツールウィンドウ

デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ(フレーム、変数など)を表示および分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に...

プログラムのステップ・スルー

ステップは、プログラムの段階的な実行を制御するプロセスです。PhpStormは、戦略に応じて使用される一連のステップアクションを提供します(たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど)。ステップボタンは、デバッグツールウィンドウのツールバーにあります。ステ...

中断されたプログラムの調査

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止して再開する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテス...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。PhpStorm は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーショ...