Bun
WebStorm は Bun(英語) と統合されているため、JavaScript および TypeScript ファイルを実行およびデバッグできるほか、パッケージマネージャーとして使用することもできます。
Before you start
プラグインのインストールの説明に従って、設定 | プラグインページのインストール済みタブで Bun バンドルプラグインが有効になっていることを確認します。
Bun をインストールする
Bun オフィシャル Web サイト(英語)の説明に従って Bun をインストールします。
Bun の設定
Ctrl+Alt+S を押して設定を開き、を選択します。
推奨ランタイムリストから、Bun を選択します。
Bun 領域で、Bun 実行可能ファイルへのパスを指定します。
Bun 実行可能ファイルへのパスはデフォルトで
PATH環境変数に設定されるため、Bun フィールドを空のままにしておくと、デバッガーは Bun 実行可能ファイルを自動的に検出しようとします。
Bun をプロジェクトパッケージマネージャーとして設定する
設定ダイアログ(Ctrl+Alt+S)で、に移動します。JavaScript ランタイムページが開きます。
パッケージマネージャーフィールドで、Bun のインストールを指定します。
システムのデフォルトのインストールを使用するには、bun を選択します。

カスタムインストールを使用するには、選択をクリックし、リストからインストールフォルダーを選択します。詳細については、プロジェクトパッケージ管理を選択を参照してください。
Bun で実行とデバッグ
WebStorm はデバッグアダプタープロトコル (DAP) をサポートし、デバッグエクスペリエンスを導入します。
Bun を使用すると、JavaScript ファイルと TypeScript ファイルの両方を実行およびデバッグできます。
エディターから Bun で実行またはデバッグを開始する
上記のように Bun をデフォルトのプロジェクトパッケージマネージャーとして指定している場合は、エディターから直接 JavaScript ファイルと TypeScript ファイルを実行してデバッグできます。この場合、WebStorm は一時的な実行 / デバッグ構成ファイルを作成し、保存して後で使用できます。
ファイルを実行するには、コンテキストメニューから実行 '<file name>' を選択します。

ファイルをデバッグするには、必要な場所にブレークポイントを設定し、コンテキストメニューからデバッグ '<file name>' を選択します。

実行 / デバッグ構成を使用して Bun で実行およびデバッグする

Bun 実行 / デバッグ構成を作成する
に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。

開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから Bun を選択します。

実行 / デバッグ構成: Bun ダイアログが開きます。
ファイルフィールドに、起動するアプリケーションのメインファイルへのパスを指定します。必要な JavaScript ファイルまたは TypeScript ファイルを指定するか、マクロ(例:
$FilePath$)を使用します。オプション:
Bun パラメーターフィールドで、Bun CLI オプション (
--watchや--hotなど) を指定します。詳細については、Bun オフィシャル Web サイト(英語)を参照してください。アプリケーションの実行を最初の行で停止するには、入場時に停止チェックボックスを選択します。

アプリケーションを実行する
上記のように Bun 実行 / デバッグ構成を作成します。
ツールバーの実行 / デバッグ構成ウィジェットリストから、新しく作成した Bun 構成を選択し、その横にある
をクリックします。

デバッグを開始する
必要に応じて、コードにブレークポイントを設定します。
上記のように Bun 実行 / デバッグ構成を作成します。
ツールバーの実行ウィジェットリストから、新しく作成した Bun 構成を選択し、その横にある
をクリックします。

デバッグツールウィンドウが開きます。
ブレークポイントを使用してコードの実行をトリガーする手順を実行し、WebStorm に切り替えます。ここで、デバッグツールウィンドウのコントロールが有効になります。デバッグセッションを続行します。ブレークポイントをステップ実行し、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。
関連ページ:
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
JavaScript ランタイム
推奨ランタイム:このエリアでは、使用するランタイムを選択します。利用可能なランタイムのセットは、インストールされているプラグインによって異なります。パッケージマネージャー:このフィールドでは、現在のプロジェクトのパッケージマネージャー (npm、Yarn、pnpm、bun) を選択します。WebStorm は、これらのマネージャーへの現在のシステムパスに、、エイリアスを使用します。カスタムインストールを使用するには、選択をクリックし、関連するパッケージマネージャーのインストールフォルダーを選...
npm、pnpm、Yarn
WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3、Bun と統合されているため、組み込みのターミナル内で IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内...
実行 / デバッグ構成
WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...
ブレークポイント
ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類:WebSto
デバッグツールウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが開きます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ (フレーム、スレッド、変数など) を表示および分析し、デバッガーアクションを実行します。デフォルトでは、デバッグツールウィンドウはプログラムがブレークポイントに到達すると開き、セッションが終了しても非表示になりません。この動作を変更するには、ビルド、実行、デプロイ | デバッガー設定ページに移動し、ブレークポイントでデバッグウィンドウを表示するチェックボ...