Bun
WebStorm は Bun と統合されており、JavaScript および TypeScript ファイルの実行やデバッグ、さらにパッケージマネージャーとしての利用が可能です。
始める前に
プラグインのインストール に記載されている通り、 設定 | プラグイン ページの インストール済み タブで 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 公式ウェブサイト をご覧ください。アプリケーションの実行を最初の行で停止するには、 入場時に停止 チェックボックスを選択します。
アプリケーションを実行する
上記のように Bun 実行 / デバッグ構成を作成します。
ツールバーの 実行 / デバッグ構成 ウィジェットリストから、新しく作成した Bun 構成を選択し、その横にある
をクリックします。
デバッグを開始する
必要に応じて、コード内に ブレークポイントを設定します。
上記のように Bun 実行 / デバッグ構成を作成します。
ツールバーの 実行 ウィジェットリストから、新しく作成した Bun 構成を選択し、その横にある
をクリックします。
デバッグツールウィンドウが開きます。
ブレークポイントを設定したコードの実行を開始する操作を行い、WebStorm に切り替えます。ここで デバッグ ツールウィンドウのコントロールが有効になります。 デバッグセッションに進み ます - ブレークポイントをステップスルーし、フレームを切り替え、値をその場で変更し、 中断されたプログラムを調べ、式を 評価し、 ウォッチを設定します。