npm、pnpm、Yarn
CLion は npm、 pnpm、 Yarn、 Yarn 2 、Yarn 3、 Bun と連携します。 そのため、組み込みの ターミナル から IDE 内で再利用可能なコードのパッケージをインストール、検索、更新、削除できます。
CLion では、npm、Yarn、pnpm のスクリプトも実行・デバッグできます。 CLion は パッケージ.json ファイルを解析し、スクリプトの定義を認識して、スクリプトをツリービューで表示し、ツリー内のスクリプトと パッケージ.json ファイルの定義の間を移動できます。 詳細については、 npm(英語)、 Yarn(英語)、 pnpm (英語) の公式 Web サイトを参照してください。
CLion は Yarn ワークスペースを持つプロジェクトを検出し、プロジェクト解析時に、ワークスペースの パッケージ.json ファイルにリストされていてルート node_modules フォルダーにあるすべての依存関係をインデックス化します。
始める前に
Node.js をダウンロードしてインストールします。 npm もインストールされているため、これを使用する場合は、前の手順を完了してください。
Yarn を使用するには、 Yarn オフィシャル Web サイト(英語)の説明に従ってインストールしてください。
pnpm を使うには、コマンドラインシェルまたは埋め込み ターミナルエミュレータ （Alt+F12 ）を開き、次のように入力してください：
npm install --g pnpm詳細については、 pnpm 公式 Web サイト(英語)を参照してください。
Bun を使用するには、 Bun オフィシャル Web サイト(英語)の説明に従ってインストールしてください。
プロジェクトパッケージマネージャーを選択する
CLion ではプロジェクトごとに npm、Yarn、Yarn 2、Bun、pnpm のいずれを使用するか選択できます。
デフォルトで、CLion は npm を提案します。 ただし、 yarn.lock ファイルを含むプロジェクトを開き、コンピューターに Yarn がインストールされている場合、CLion はこのプロジェクトのパッケージマネージャーを自動的に Yarn に変更します。
pnpm-lock ファイルを含むプロジェクトを開き、コンピューターに pnpm がインストールされている場合、CLion はこのプロジェクトのパッケージマネージャーを自動的に pnpm に変更します。
プロジェクトに bun.lock または bun.lockb ファイルがあり、コンピューターに Bun がインストールされている場合、CLion はこのプロジェクトで npm の代わりに Bun を使用するよう提案します。
Yarn 1 または pnpm をデフォルトの CLion パッケージマネージャーとして設定することもできます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。 JavaScript ランタイムページが開きます。
パッケージマネージャー フィールドで、プロジェクトのパッケージマネージャーを指定します。
システムのデフォルトのインストールを使用するには、 npm、 yarn、 pnpm 、または bun を選択します。
パッケージマネージャーのカスタムインストールを使用するには、 選択 をクリックし、関連するパッケージマネージャーのインストールフォルダーを選択します。
CLion では、 実行/デバッグ構成: NPMダイアログ内の パッケージマネージャー リストから
プロジェクトエイリアスを選択すると、自動的に選択したパッケージマネージャーが使用されます。 CLion は 'npm install' の実行/'yarn install' の実行/'pnpm install' を実行 コマンドを呼び出したり、npm/Yarn/pnpm スクリプトを実行したりするたびに選択したパッケージマネージャーへのパスを使います。 詳細については、 スクリプトの実行とデバッグを参照してください。
新しいプロジェクトのデフォルトの CLion パッケージマネージャーを設定する
新規プロジェクトの設定 ダイアログ（ ）を開き、 に進みます。
開いた Node.js と NPM ページで、リストから必要なパッケージマネージャーを選択します。
その後、新しいプロジェクト作成時に CLion は選択したパッケージマネージャーをデフォルトとして提案します。
プロジェクトで Yarn 2 を設定する
Yarn 1 がグローバルにインストールされていることを確認し、 Yarn オフィシャル Web サイト(英語)の説明に従って、プロジェクトで Yarn 2 を有効にします。 埋め込まれた ターミナルエミュレータ Alt+F12 を使用して、コマンドを入力します。
設定 ダイアログ（Ctrl+Alt+S ）で、 に移動し、 パッケージマネージャー リストからプロジェクト内の Yarn 2 パッケージへのパスを選択します。
package.json を編集
CLion は パッケージ.json ファイル内でプロジェクトの依存関係を処理するのに役立ち、充実したコーディング支援を提供します。
パッケージ名のコード補完。
利用可能な最新パッケージバージョンの情報。
npm install <package>@<version>またはyarn add <package>@<version>を介してインストールできるバージョンの範囲に関する情報。 `npm installまたはyarn installを実行すると、この範囲から入手可能な最新バージョンがインストールされます。Ctrl を押してバージョンにマウスオーバーすると、ツールチップに情報が表示されます。 セマンティックバージョニングの詳細については、 npm の公式ドキュメント(英語)を参照してください。
指定したパッケージバージョンがインストールされているかどうかの表示と、利用可能な最新バージョンに関する情報
以前のパッケージバージョンのコード補完。 Ctrl+Space を押すか最新と異なるバージョンを入力すると、CLion はパッケージの過去バージョンの候補リストを表示します。
パッケージのクイックドキュメント検索。
パッケージのインストールと更新
ご存知の通り、npm はパッケージを グローバルにも、 プロジェクト依存関係や 開発依存関係としてもインストールできます。詳細は npm 公式サイトをご覧ください。
pnpm もパッケージを グローバル、 プロジェクト依存関係、 開発依存関係としてインストールできます。詳しくは pnpm 公式サイトへ。
Yarn を使用すると、パッケージを グローバル(英語)にインストールすることも、 プロジェクトの依存関係としてインストールすることもできます。 詳細については、 Yarn オフィシャル Web サイト(英語)を参照してください。
CLion では、パッケージはエディター、 パッケージ.json ファイル、組み込みの ターミナルエミュレータ Alt+F12 、または JavaScript ランタイムページからインストールできます。
package.json から
プロジェクトの依存関係をインストールする
ポップアップで 'npm install' の実行、 'yarn install' の実行、 'pnpm install' を実行 リンクをクリックします。
CLion は依存関係が未インストールまたは変更された場合、このポップアップを表示します。 ポップアップを閉じるか 今後このメッセージを表示しない を選択してポップアップをオフにしても、 「<package_manager> install」を実行する。 アクションまたは 内蔵ターミナルを使用して依存関係をインストールできます。
CLion で Node.js ランタイムが検出できない場合は、エラーがポップアップで報告され JavaScript ランタイム ページへのリンクから Node.js インタープリターの構成を行えます。
この通知を誤って閉じてしまい、元に戻したい場合は、 Ctrl+Shift+A を押して
Enable notificationsと入力し始め、リストから package.json の依存関係のインストールに関する通知を有効化する を選択します。または、関連する パッケージ.json ファイルをエディターで開くか、 プロジェクト ツールウィンドウで選択して、コンテキストメニューから 'npm install' の実行 を選択します。
プロジェクトの依存関係を更新する
ポップアップで 「<package manager> install」を実行 をクリックします。
プロジェクトを開く、バージョン管理から更新する、あるいは パッケージ.json を編集するたびに CLion はこのポップアップを表示します。
CLion は
依存関係またはdevDependenciesからパッケージがインストールされているか、およびそのバージョンが指定範囲と一致しているか確認するインスペクションも実行します。 インスペクションが不一致を検出した場合、クイックフィックスを提案します。 適用するには、 「<package manager> install」を実行 リンクをクリックします。
CLion はより新しいバージョンが存在するパッケージも検出し、バージョンにカーソルを合わせるとクイックフィックスを提供します。
または、 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> --devpnpm add --save-dev <package_name>
package.json ファイルにリストされているすべての依存関係をインストールする
コマンドライン シェルまたは埋め込み ターミナルエミュレータ （Alt+F12 ）で、次のいずれかのコマンドを入力してください：
npm installyarn installpnpm install
その結果、現在のフォルダーから パッケージ.json にリストされているすべての依存関係を取得します。 package.json の編集から詳細を参照してください。
脆弱なパッケージを検出する
CLion は Mend.io 脆弱性データベースと National Vulnerability Databaseを調べて、プロジェクトで使うパッケージの脆弱性を検出します。 コードを作成すると、IDE は脆弱性があると考えられるパッケージをハイライトし、その説明を提供し、可能な場合は修正を提案します。 検出された脆弱なパッケージのリスト全体が 問題 ツールウィンドウに表示されます。
脆弱性チェックは、 脆弱な宣言済み依存関係 コードインスペクションが パッケージチェッカープラグインに依存して処理します。 このプラグインは Mend.io(英語) によって提供されています。 このプラグインは CLion にバンドルされ、デフォルトで有効化されています。 関連機能が利用できない場合は、プラグインを無効化していないことを確認してください。 詳細については、 プラグイン設定を開く を参照してください。
エディターでパッケージの脆弱性の問題を解決する
パッケージ.json ファイル内のハイライトされたパッケージにマウスを置きます。 ポップアップツールウィンドウには、検出された脆弱性の説明が表示されます。
クイックフィックスを適用するには、 その他のアクション Alt+Enter をクリックして、関連する提案を選択します。
問題ツールウィンドウで脆弱なパッケージを表示する
インスペクションウィジェットで
をクリックします。問題 ツールウィンドウの ファイル タブには、アクティブなエディタータブで開かれている パッケージ.json の脆弱なパッケージがすべてリストされます。 各項目には説明が付いています。
問題を解決するには、リストで脆弱なパッケージを選択し、ツールバーの
をクリックするか、 Alt+Enter を押して、関連する提案を選択します。脆弱性のある依存関係 タブには、プロジェクト内で検出されたすべての脆弱なパッケージがリストされます。
問題を修正するには、リストで脆弱なパッケージを選択し、右側のペインで 安全なバージョンをクリップボードにコピー リンクをクリックし、コピーしたバージョンを パッケージ.json に貼り付けます。
詳細は 結果の取得と問題の解決を参照してください。
パッケージの脆弱性チェックを無効にする
デフォルトでパッケージの脆弱性チェックは有効化されています。
これをオフにするには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、 セキュリティ ノードの 脆弱な宣言済みの依存関係 インスペクションの横にあるチェックボックスをオフにします。
あるいは 設定 ダイアログ（Ctrl+Alt+S ）を開き、 へ移動し、 パッケージチェッカー プラグインを探して 無効化 をクリックします。
スクリプト実行
npm、Yarn、pnpm スクリプトは、エディターの パッケージ.json ファイルから、専用の npm ツールウィンドウのスクリプトツリーから、専用の実行構成に従って、または start-up または before-launch タスクとして自動的に起動できます。
スクリプト実行の結果は 実行ツールウィンドウに表示されます。 ツールウィンドウには、npm または Yarn スクリプトの出力、エラーの報告、見つからなかったパッケージまたはプラグインの一覧などが表示されます。 最後に実行されたスクリプトの名前がツールウィンドウのタイトルバーに表示されます。
スクリプトのデバッグセッションを開始すると、CLion は デバッグツールウィンドウを開きます。ここで、 スクリプトをステップ実行したり、スクリプトの実行を 停止および再開したり、 中断されたときにスクリプトを確認したり、 デバッガーコンソールで JavaScript コードスニペットを実行したりできます。
package.json からスクリプトを実行する
CLion は パッケージ.json ファイルから単一スクリプトを素早く起動できます。 いくつかのスクリプトを実行またはデバッグするには、実行構成または npm ツールウィンドウを使用します。
エディターで該当する パッケージ.json ファイルを開き、スクリプトの横にあるガター内の
をクリックし、コンテキストメニューから <script_name> を実行する。 を選択します。
Ctrl+Shift+F10 を押してスクリプトを実行することもできます。
スクリプトの出力は、 実行 ツールウィンドウに表示されます。
デバッグモードでスクリプトを起動すると、CLion は デバッグツールウィンドウを開きます。ここで、 スクリプトのステップ実行、スクリプトの実行の 停止と再開、 中断時の検査、 デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。
npm ツールウィンドウからスクリプトを実行する
プロジェクト ツールウィンドウ（Alt+1 ）で パッケージ.json ファイルを選択するか、エディターでファイルを開いてコンテキストメニューから npmスクリプトを表示する。 を選択すると、 npm ツールウィンドウが開きます。
npm、pnpm、Yarn を呼び出すとすぐに、ツールは、呼び出された パッケージ.json ファイルの スクリプト プロパティ内で定義されたスクリプトのツリーの構築を開始します。
プロジェクトに複数の パッケージ.json ファイルがある場合は、それらごとに個別のスクリプトツリーを構築し、以前に構築したツリーを削除せずにスクリプトを実行できます。 各ツリーは、個別のノードに表示されます。
npm ツールウィンドウがまだ開いていない場合は開く
プロジェクト ツールウィンドウ（Alt+1 ）で必要な ファイルを選択するか、エディターでファイルを開き、コンテキストメニューから npmスクリプトを表示する。 を選択します。
npm ツールウィンドウが開き、選択または開いた パッケージ.json ファイルに従って作成されたスクリプトツリーが表示されます。
すでに開いている npm ツールウィンドウでスクリプトのツリーを構築する
npm ツールウィンドウで、ツールバーの
をクリックして、リストから必要な パッケージ.json ファイルを選択します。 デフォルトでは、CLion はプロジェクトのルートに パッケージ.json ファイルを表示します。別の パッケージ.json ファイルがある場合は、 package.json を選択する。 をクリックして表示されるダイアログで必要な パッケージ.json ファイルを選択します。 CLion は、選択した パッケージ.json ファイルへのパスをタイトルに含む新しいノードを追加し、その下にスクリプトツリーを構築します。
ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のスクリプトを名前でソートする
ツールバーの
をクリックし、メニューから 並べ替え を選択してから、 命名方法名 を選択します。 デフォルトでは、ツリーには、 パッケージ.json （オプション 定義順序 ）で定義されている順序でスクリプトが表示されます。
1 つのスクリプトを実行する
スクリプトをダブルクリックしてください。
ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから <script name> を実行する。 を選択します。
いくつかのスクリプトを実行する
複数選択モードを使用します：隣接するアイテムの場合は Shift キーを、隣接しないアイテムの場合は Ctrl キーを押しながら、必要なスクリプトを選択し、選択のコンテキストメニューから 実行 または デバッグ を選択します。
実行構成によるスクリプトの実行
エディターや npm ツールウィンドウからスクリプトを実行またはデバッグすると、CLion は 一時的な実行構成を自動的に作成します。 使用する以外に、独自の npm 実行構成を作成して起動できます。
NPM の実行 / デバッグ構成を作成する
に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。
開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (
) をクリックし、リストから npm を選択します。 実行 / デバッグ構成: npm ダイアログが開きます。実行する CLI コマンド、実行するスクリプト（区切り文字として空白を使用）、およびこれらのスクリプトが定義されている パッケージ.json ファイルの場所を指定します。 必要に応じて、スクリプトを実行するための コマンドライン引数(英語)を入力します。
使用する Node.js ランタイムを指定します。
プロジェクト エイリアスを選択すると、CLion は ノードランタイム フィールドの JavaScript ランタイムページからプロジェクトデフォルトのインタープリターを自動的に使用します。 ほとんどの場合、CLion はプロジェクトのデフォルトランタイムを検出し、フィールドに自動的に入力します。
別の構成済みローカルインタープリターを選択するか、
をクリックして新しいものを構成することもできます。必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーターと 環境変数(英語)を指定します。
変数の定義は、 環境変数 フィールドにセミコロン (
;) を区切りとして表示されます。例えば：NODE_PATHモジュール解決時に検索する追加ディレクトリのリストです。 リスト内のディレクトリを区切るには、macOS または Linux ではコロン (
:) を、Windows ではセミコロン (;) を使用してください。NODE_MODULE_CONTEXTS独自のグローバルコンテキストでモジュールをロードするには 1 に設定します。
NODE_DISABLE_COLORSREPL の色を無効化するには 1 に設定します。
または、フィールドの右側にある 閲覧
をクリックし、表示される 環境変数 ダイアログで変数のリストを設定します：- 、
、 
、 
ボタンを使用して、カスタム変数のリストを管理します。 ダイアログには、使用可能なシステム環境変数のリストも表示されます。 現在の構成でシステム環境変数を使用しない場合は、 システム環境変数を含める チェックボックスをオフにしてください。
準備ができたら OK をクリックします。
使用するパッケージマネージャーを指定します。
プロジェクトエイリアスを選択すると、CLion は JavaScript ランタイムページのデフォルトプロジェクトパッケージマネージャーを使用します。 関連するパッケージのエイリアス (npm または yarn) を選択したり、パッケージマネージャーのカスタムインストールへの明示的なパスを指定したりすることもできます。Docker コンテナーでリモート Node.js ランタイムを使用している場合は、自動生成された Docker コンテナーの設定を確認してください。
をクリックすると、ポップアップで設定が開きます。
npm、pnpm、yarn と Docker と リモート Node.js ランタイムの設定の詳細を参照してください。
パッケージマネージャーのコマンドラインインターフェースの詳細については、 npm 公式 Web サイト(英語)および Yarn オフィシャル Web サイト(英語)を参照してください。
スクリプトを実行する
ツールバーの 実行 ウィジェットから、新しく作成された実行構成を選択し、その横にある
または 
をクリックします。スクリプト実行の結果は 実行ツールウィンドウに表示されます。
- をクリックすると、 CLion は デバッグツールウィンドウを開きます。ここで、 スクリプトのステップ実行 、スクリプトの実行の 停止と再開、 中断時の検査、 デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。
なんでも実行でスクリプトを実行する
なんでも実行は、スクリプトをすばやく開始する方法です。
Ctrl を 2 回押すか、ナビゲーションバーの
をクリックします。 Run Anything ポップアップが開きます。検索フィールドにパッケージマネージャーの名前を入力します。 入力すると CLion が一致するコマンドを表示します。
または、スクリプトの名前を入力します。
最後に、
?と入力すると、コマンドのヒントのリストが表示されます。
関連するヒントに移動し、 Space を押して使用可能なコマンドのリストを取得し、リストから必要なコマンドを選択して、 Enter を押します。
コマンド出力を 実行 ツールウィンドウに表示するには、 Ctrl+Enter を押し、出力を デバッグ ツールウィンドウに表示するには、 Shift+Enter を押します。
起動時にスクリプトを自動的に実行する
定期的に実行するスクリプトがいくつかある場合は、対応する実行構成を 起動タスクのリストに追加できます。 タスクはプロジェクトの起動時に自動的に実行されます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
開いた 起動タスクページで、ツールバーの
をクリックします。リストから、必要な npm 実行構成を選択します。 設定がリストに追加されます。
プロジェクトに適用可能な構成がない場合は、
をクリックして 実行構成の編集 を選択します。 次に、開いた 実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。 新しい設定を保存すると、自動的に起動タスクのリストに追加されます。
起動前のタスクとしてスクリプトを実行する
メインメニューから を選んで 実行 / デバッグ構成ダイアログ ダイアログを開き、リストから構成を選択するか、
クリックで新しい実行構成タイプを作成してください。開いたダイアログで、 起動前 エリアの
をクリックし、リストから npm スクリプトを実行する。 を選択します。開いた NPM スクリプト ダイアログで、 npm 実行 / デバッグ構成設定を指定します。
デバッグスクリプト
npm、Yarn、pnpm スクリプトのデバッグは、エディター内の パッケージ.json ファイル、専用の npm ツールウィンドウ内のスクリプトツリー、または専用の実行構成に従って開始できます。
いずれの場合も、CLion は デバッグツールウィンドウを開き、そこで スクリプトをステップ実行 、スクリプトの実行を 停止および再開、 中断時のスクリプトの調査、 デバッガーコンソールで JavaScript コードスニペットの実行などができます。
package.json からのデバッグスクリプト
CLion を使用すると、 パッケージ.json ファイルから個々のスクリプトのデバッグセッションをすばやく開始できます。 複数のスクリプトをデバッグするには、実行構成または npm ツールウィンドウを使用してください。
エディターで該当する パッケージ.json ファイルを開き、スクリプトの横にあるガター内の
をクリックし、コンテキストメニューから <script_name> をデバッグする。 を選択します。
CLion は デバッグツールウィンドウを開き、そこで スクリプトをステップ実行 、スクリプトの実行を 停止および再開、 中断時のスクリプトの調査、 デバッガーコンソールで JavaScript コードスニペットの実行などができます。
npm ツールウィンドウからスクリプトをデバッグする
プロジェクト ツールウィンドウ（Alt+1 ）で パッケージ.json ファイルを選択するか、エディターでファイルを開いてコンテキストメニューから npmスクリプトを表示する。 を選択すると、 npm ツールウィンドウが開きます。
npm、pnpm、Yarn を呼び出すとすぐに、ツールは、呼び出された パッケージ.json ファイルの スクリプト プロパティ内で定義されたスクリプトのツリーの構築を開始します。
プロジェクトに複数の パッケージ.json ファイルがある場合は、それらごとに個別のスクリプトツリーを構築し、以前に構築したツリーを削除せずにスクリプトを実行できます。 各ツリーは、個別のノードに表示されます。
npm ツールウィンドウがまだ開いていない場合は開く
プロジェクト ツールウィンドウ（Alt+1 ）で必要な ファイルを選択するか、エディターでファイルを開き、コンテキストメニューから npmスクリプトを表示する。 を選択します。
npm ツールウィンドウが開き、選択または開いた パッケージ.json ファイルに従って作成されたスクリプトツリーが表示されます。
すでに開いている npm ツールウィンドウでスクリプトのツリーを構築する
npm ツールウィンドウで、ツールバーの
をクリックして、リストから必要な パッケージ.json ファイルを選択します。 デフォルトでは、CLion はプロジェクトのルートに パッケージ.json ファイルを表示します。別の パッケージ.json ファイルがある場合は、 package.json を選択する。 をクリックして表示されるダイアログで必要な パッケージ.json ファイルを選択します。 CLion は、選択した パッケージ.json ファイルへのパスをタイトルに含む新しいノードを追加し、その下にスクリプトツリーを構築します。
ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のスクリプトを名前でソートする
ツールバーの
をクリックし、メニューから 並べ替え を選択してから、 命名方法名 を選択します。 デフォルトでは、ツリーには、 パッケージ.json （オプション 定義順序 ）で定義されている順序でスクリプトが表示されます。
1 つのスクリプトをデバッグする
ツリー内のスクリプトを選択して、コンテキストメニューから <script_name> をデバッグする。 を選択します。
CLion は デバッグツールウィンドウを開きます。ここで、 スクリプトのステップ実行 、スクリプトの実行の 停止と再開、 中断時の検査、 デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。
複数のスクリプトをデバッグする
複数選択モードを使用します：隣接するアイテムの場合は Shift キーを、隣接しないアイテムの場合は Ctrl キーを押しながら、必要なスクリプトを選択し、選択のコンテキストメニューから 実行 または デバッグ を選択します。
実行構成によるデバッグスクリプト
エディターや npm ツールウィンドウからスクリプトを実行またはデバッグすると、CLion は 一時的な実行構成を自動的に作成します。 使用する以外に、独自の npm 実行構成を作成して起動できます。
に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。
開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (
) をクリックし、リストから npm を選択します。 実行 / デバッグ構成: npm ダイアログが開きます。実行する CLI コマンド、実行するスクリプト（区切り文字として空白を使用）、およびこれらのスクリプトが定義されている パッケージ.json ファイルの場所を指定します。 必要に応じて、スクリプトを実行するための コマンドライン引数(英語)を入力します。
使用する Node.js ランタイムを指定します。
プロジェクト エイリアスを選択すると、CLion は ノードランタイム フィールドの JavaScript ランタイムページからプロジェクトデフォルトのインタープリターを自動的に使用します。 ほとんどの場合、CLion はプロジェクトのデフォルトランタイムを検出し、フィールドに自動的に入力します。
別の構成済みローカルインタープリターを選択するか、
をクリックして新しいものを構成することもできます。必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーターと 環境変数(英語)を指定します。
変数の定義は、 環境変数 フィールドにセミコロン (
;) を区切りとして表示されます。例えば：NODE_PATHモジュール解決時に検索する追加ディレクトリのリストです。 リスト内のディレクトリを区切るには、macOS または Linux ではコロン (
:) を、Windows ではセミコロン (;) を使用してください。NODE_MODULE_CONTEXTS独自のグローバルコンテキストでモジュールをロードするには 1 に設定します。
NODE_DISABLE_COLORSREPL の色を無効化するには 1 に設定します。
または、フィールドの右側にある 閲覧
をクリックし、表示される 環境変数 ダイアログで変数のリストを設定します：- 、 、 、 ボタンを使用して、カスタム変数のリストを管理します。
ダイアログには、使用可能なシステム環境変数のリストも表示されます。 現在の構成でシステム環境変数を使用しない場合は、 システム環境変数を含める チェックボックスをオフにしてください。
準備ができたら OK をクリックします。
使用するパッケージマネージャーを指定します。
プロジェクトエイリアスを選択すると、CLion は JavaScript ランタイムページのデフォルトプロジェクトパッケージマネージャーを使用します。 関連するパッケージのエイリアス (npm または yarn) を選択したり、パッケージマネージャーのカスタムインストールへの明示的なパスを指定したりすることもできます。Docker コンテナーでリモート Node.js ランタイムを使用している場合は、自動生成された Docker コンテナーの設定を確認してください。
をクリックすると、ポップアップで設定が開きます。npm、pnpm、yarn と Docker と リモート Node.js ランタイムの構成の詳細を参照してください。
ツールバーの 実行 ウィジェットから、新しく作成した実行構成を選択し、その横にある
をクリックします。CLion は デバッグツールウィンドウを開き、そこで スクリプトをステップ実行 、スクリプトの実行を 停止および再開、 中断時のスクリプトの調査、 デバッガーコンソールで JavaScript コードスニペットの実行などができます。
パッケージマネージャーのコマンドラインインターフェースの詳細については、 npm 公式 Web サイト(英語)および Yarn オフィシャル Web サイト(英語)を参照してください。
npm、pnpm、Docker の yarn
CLion で パッケージ.json を編集し、Docker コンテナ内のプロジェクト依存関係をローカルと同じようにインストール・更新・削除できます。
設定 | プラグイン ページの Marketplace タブで Node.js および Node.js リモートインタープリター プラグインを、 JetBrains Marketplace からプラグインをインストールする方法に従ってインストールします。
設定で Docker プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに Docker と入力します。 プラグインの詳細については、 プラグインの管理 を参照してください。
Docker を Docker プラグイン統合 の説明に従ってダウンロード、インストール、設定します。
Docker で Node.js リモートランタイムを構成するまたは Docker Compose 経由でインストールし、プロジェクトの デフォルトとして設定してください。 また、このリモートランタイムに関連付けられたパッケージマネージャーが プロジェクトのデフォルトとして設定されていることを確認してください。
ローカル開発と同様に進めてください： package.json を編集、 プロジェクト依存関係を管理、 スクリプトを実行またはデバッグします。