WebStorm 2020.3 ヘルプ

npm、pnpm、Yarn

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

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

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

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

始める前に

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

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

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

    npm install --g pnpm

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

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

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

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

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

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

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

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

    Select project package manager: choose the default system installation
    • システムのデフォルトインストールを使用するには、npmyarn、または pnpm を選択します。

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

      Select project package manager: choose a custom installation

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

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

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

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

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

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

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

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

package.json の編集

WebStorm は、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 を押すか、最新のものとは異なるバージョンを入力し始めると、WebStorm はパッケージの以前のすべてのバージョンを含む候補リストを表示します。

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

    Quick documentation look-up for packages

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

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

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

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

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

package.json から

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

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

    Install dependencies popup

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

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

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

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

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

    Update dependencies: popup

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

    WebStorm は、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 ページ

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

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

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

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

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

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

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

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

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

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

パッケージを削除する

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

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

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

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

Running a script: Run tool window

スクリプトデバッグセッションを起動すると、WebStorm はデバッグツールウィンドウを開きます。

Debugging a script: Debug tool window

スクリプトのデバッグセッション中に、プログラムのステップ実行、プログラムの実行の停止と再開一時停止時の検査実際の HTMLDOM の表示などを行うことができます。

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

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

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

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

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

デバッグモードでスクリプトを起動すると、WebStorm はデバッグツールウィンドウを開きます。ここで、プログラムのステップ実行、プログラムの実行の停止と再開一時停止時の検査実際の HTMLDOM の表示などを行うことができます。

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

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

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

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

    Open the npm tool window

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

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

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

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

Build another scripts tree

ツリーを再構築する

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

    Reload Scripts

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

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

    Sort scripts by name

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

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

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

Run one script from the npm tool window

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

Debug one script from the npm tool window

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

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

    Run multiple scripts

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

エディターまたは npm ツールウィンドウからスクリプトを実行またはデバッグすると、WebStorm は一時的な実行構成を自動的に作成します。使用する以外に、独自の 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 エイリアスを選択した場合、WebStorm は Node.js ページのデフォルトのプロジェクトパッケージマネージャーを使用します。関連するパッケージエイリアス( npm または yarn)を選択するか、パッケージマネージャーのカスタムインストールへの明示的なパスを指定することもできます。

  6. ツールバーのリストから新しく作成された実行構成を選択し、リストの横にある Run または Debug をクリックします。

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

    Debug をクリックすると、WebStorm はデバッグツールウィンドウを開きます。ここで、プログラムのステップ実行、プログラムの実行の停止と再開一時停止時の検査実際の HTMLDOM の表示などを行うことができます。

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

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

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

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

    Run Anything: npm script

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

    Running script in the Debug tool window from the Run Anything popup

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

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

  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

このページは、プラグインの管理に従って、設定 / 環境設定 | プラグインページのインストール済みタブでNode.jsバンドルプラグインが有効になっている場合にのみ表示されます。次の Node.js バージョンが WebStorm 2020.3 でサポートされています。Node.js 10、Node

ターミナル

WebStorm には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Git コマンドの実行、ファイルのアクセス許可の設定、およびその他のコマンドラインタスクの実行に使用します。ターミナルエミュレータは最初、デフォルトのシステムシェルで実行されますが、Windows PowerShell、コマンドプロンプト cmd.exe、、など、他の多くのシェルをサポートしています。シェルの変更については、...

実行ツールウィンドウ

実行ツールウィンドウには、アプリケーションで生成された出力が表示されます。複数のアプリケーションを実行している場合は、それぞれが実行 / デバッグ構成が適用された後に名前が付けられたタブに表示されます。アプリケーションを re-run すると、新しい出力によってタブの内容が上書きされます。アプリケーションの出力を保持するには、アプリケーションを再実行しても、出力タブを固定します。アプリケーションがの開発モードで実行されている場合は、実行ツールウィンドウから直接デバッグを開始できます。を押したまま、...

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

デバッガーセッションを開始すると、WebStorm はデバッグツールウィンドウを開きます。このウィンドウでは、さまざまなデバッガーアクションを実行し、プログラムデータ(フレーム、スレッド、変数など)を分析できます。コントロールの詳細な説明については、デバッグツールウィンドウを参照してください。ツールウィンドウを使用する一般的な手順については、ツールウィンドウを参照してください。デフォルトでは、デバッグツールウィンドウは、プログラムがブレークポイントに達したときにのみ表示され、デバッグセッションが...

デバッガーセッションを開始する

デバッガーセッションは実行 / デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。一度に異なる設定で複数のデバッガーセッションを実行できます。構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStorm にいくつかのパラメーターを使用したり、いくつかのアクションを実行したりするように指示することもできます。例:Node.js 固有のコマンドラインオプションを Node.js 実行可能ファイルに渡すことが...

中断されたプログラムを調べる

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、ブレークポイントに到達するか、プログラムを手動で一時停止するまで、プログラムは正常に実行されます。その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。誤ってデバッグツールウィンドウを閉じた場合は、メインメニューからを選択するか、を押して再度開きます。コールスタックを調べる:プログラムが一時停止されると、この時点に到達したコールスタックがフレームペインに表示され