PhpStorm 2020.1ヘルプ

npmおよびYarn

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

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

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

PhpStorm indexes all the dependencies listed in different package.json file but stored in the root node_modules folder

始める前に

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

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

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

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

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

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

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

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

      Select project package manager

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

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

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

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

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

  • 新規プロジェクトの設定ダイアログ(ファイル | 新規プロジェクトの設定)を開き、言語とフレームワーク | Node.jsとNPMに移動します。開いたNode.js および NPMページで、パッケージ・マネージャーリストから yarn を選択します。

    その後、PhpStormは新しいプロジェクトを作成するたびにデフォルトとしてYarnを提案します。

組み込みのターミナルを使用したパッケージのインストール

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

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

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

    • グローバルインストール用のnpm install --global <package_name> または yarn global add <package_name>

    • プロジェクトの依存関係または開発の依存関係としてパッケージをインストールするには、npm install --save <package_name> , npm install --save-dev <package_name>、または yarn add <package_name> --dev

package.jsonファイルからすべての依存関係をインストールする

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

    • npm install

    • yarn 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をクリックします。

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

package.jsonファイルから依存関係をインストールする

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

  • ポップアップで実行 'npm install'をクリックしてください。

    ws_npm_yarn_package_run_npm_install_package_json_dependent.png

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

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

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

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

    ws_npm_yarn_package_run_npm_update.png

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

    PhpStormは、dependencies または devDependencies からのパッケージがインストールされていて、それらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。

    ws_node_inspect_that_package_up_to_date.png

    インスペクションが不一致を検出した場合、クイックフィックスを提案します。これを適用するには、Alt+Enter を押して、リストから実行 'npm install'または実行 'yarn install'を選択します。

    ws_node_inspect_that_package_up_to_date_quick_fix.png

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

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

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

During a script debugging session, PhpStorm opens the デバッグツールウィンドウ where you can step through the program , pause and resume the program execution, examine it when suspended, view actual HTML DOM, and so on

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

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

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

    ws_run_npm_task.png
  • 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を押します。

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

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

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

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

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

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

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

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

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

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

最終更新日: 2020年6月23日

関連ページ:

Node.jsとNPM

macOSのPhpStorm |プリファレンス | 言語とフレームワーク | Node.jsとNPMこのページは、Node.jsバンドルプラグインが有効になっている場合にのみ表示されます。プラグインが無効になっている場合は、プラグインを管理する説明に従ってプラグインをアクティブにします。Node イ...

ターミナル

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

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

When youstart a debugger session, theデバッグtool window appears. This window is used for controlling the debugger session, displaying and analyzing the p...

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

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

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

After the debugger session hasstarted, theデバッグtool window will appear, and the program will run normally until one of the following happens:abreakpoin...

Node.js

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