Vite

空の JetBrains Rider ソリューションを作成する

1. ウェルカム画面で新規ソリューションをクリックするか、メインメニューからファイル | 新規ソリューションを選択します。新規ソリューションダイアログが開きます。

2. 左側のペインで、空のソリューションを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

空のソリューションに Vite をインストールする

1. Vite を使用する空のソリューションを開きます。

2. 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

   npm install --save-dev vite

Vite 構成を検出する方法を選択する

1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | Vite に移動します。

2. モジュール解決のための Vite 構成ファイルの検出領域で、次のいずれかのオプションを選択します。

   • 自動 : このモードでは、JavaScript または TypeScript ファイルの場合、JetBrains Rider は最初にこの JavaScript または TypeScript ファイルが配置されているフォルダーで Vite 構成ファイルを探し、次にその親フォルダーで探します。

     その結果、プロジェクトが異なる Vite 構成の複数のモジュールで構成されている場合、各モジュールは独自の Vite 構成ファイルのモジュール解決ルールを使用します（そのような構成が見つかった場合）。

     JetBrains Rider は、次の名前の JavaScript または TypeScript Vite 構成ファイルを次の順序で認識します。

     • vite.config.js / vite.config.ts

     • vite.config.mjs

     • vite.config.cjs

   • 手動 : 構成ファイルフィールドで、使用する Vite 構成の場所を指定します。

     このモードでは、指定された構成ファイルの解決ルールがプロジェクト内のすべてのモジュールに適用されます。

     Vite 構成ファイルの名前が JetBrains Rider で認識されない場合は、このオプションを選択します。上記の認識される Vite 構成名のリストを参照してください。

     

npm 実行 / デバッグ構成を作成する

1. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

   

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

2. 開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。

   コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの dev スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。

   

3. オプション:

   ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。

   アプリケーションをデバッグする場合は、Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。

   

アプリケーションの実行

1. ツールバーのリストから npm dev 実行構成を選択し、その横にある をクリックします。

   

2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

   実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。このリンクをクリックすると、アプリケーションが表示されます。

   

   または、上記のように、 JetBrains Rider が起動時にアプリケーションを開くようにします。

単一の npm 実行 / デバッグ構成で Vite アプリケーションを実行およびデバッグする

1. コードにブレークポイントを設定します。

2. 上記の説明に従って npm 構成を作成します。

   create-vite を使用してアプリケーションを生成した場合、JetBrains Rider はデフォルト名 npm dev で npm 構成をすでに作成しています。構成は、実行ウィジェットおよび実行 / デバッグ構成ダイアログで利用できます。

   

3. 開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。

   コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの dev スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。

   

4. ブラウザー / Live Edit タブで、起動後チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、JavaScript デバッガーを使用するチェックボックスを選択して、アプリケーションを実行する URL を指定します。

   

5. 実行をクリックします。

   構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある をクリックします。

   JetBrains Rider はアプリケーションを開発モードで実行し、同時にデバッグセッションを起動します。

   

6. 最初のブレークポイントに到達したら、デバッグウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。

JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する

1. コードにブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

   実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL をコピーして、後で JavaScript デバッグ構成で指定します。

   

3. JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 実行構成の編集に移動し、 をクリックして、リストから JavaScript デバッグを選択します。

4. 開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。この URL は、上記のように、実行ツールウィンドウまたはターミナルにコピーできます。

   

5. デバッグをクリックします。

   構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある をクリックします。

   

6. 最初のブレークポイントに到達したら、デバッグウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。

1. コードにブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。Ctrl+Shift を押したまま、この URL リンクをクリックします。JetBrains Rider は、タイプ JavaScript デバッグの自動生成された 構成でデバッグセッションを開始します。