IntelliJ IDEA 2020.3 ヘルプ

npm、pnpm、Yarn

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

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 に変更します。

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

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

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

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

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

      Select project package manager: choose a custom installation

    実行 / デバッグ構成: NPM ダイアログのパッケージマネージャーリストから Project エイリアスを選択すると、IntelliJ IDEA は選択されたパッケージマネージャーを自動的に使用します。IntelliJ IDEA はまた、実行 '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 をデフォルトの IntelliJ IDEA パッケージマネージャーとして設定する

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

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

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

package.json の編集

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

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

    Quick documentation look-up for packages

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

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

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

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

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

package.json から

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

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

    Install dependencies popup

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

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

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

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

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

    Update dependencies: popup

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

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

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

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

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

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

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

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

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

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

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

  • リストからパッケージを選択して 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

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

Debugging a script: Debug tool window

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

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

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

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

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

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

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

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

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

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

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

    Open the nmp tool window

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

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

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

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

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

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

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

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

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

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

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

    Run Anything: npm script

    コマンド出力を実行ツールウィンドウに表示するには、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

このページは、プラグインの管理に従って、設定 / 環境設定 | プラグインページのインストール済みタブで Node.js バンドルプラグインが有効になっている場合にのみ表示されます。Node.js の操作方法については、Node.js アプリケーションの開発セクションを参照してください。次の Node.js バージョンが IntelliJ IDEA 2020.3 でサポートされています。Node.js 10、Node.js 12、Node.js 14、Node.js 15、サポートされている Node...

ターミナル

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

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

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

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

デバッガーセッションの開始は、通常モードでのプログラムと非常に似ています。デバッガーはバックグラウンドで接続されているため、デバッガーセッションを開始するために特別な設定を行う必要はありません。IntelliJ IDEA からプログラムを実行できる場合は、同じ構成を使用してプログラムをデバッグすることもできます。このトピックは、実行 / デバッグ構成の理解に依存しています。IntelliJ IDEA は追加のセットアップなしで単純なアプリケーションをデバッグする方法を提供しますが、デバッガーを効...

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

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

Node.js

Node.js は、ブラウザーの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。IntelliJ IDEA は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、メンテナンスを支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.j...