Vite

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規プロジェクトダイアログが開きます。

2. 左側のペインで、 Vite を選択します。

3. 右側のペインで:

   1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

   2. ノードランタイム フィールドで使用する Node.js ランタイムを指定します。 リストから設定済みのランタイムを選択するか、 追加 を選択して新しいランタイムを設定してください。

   3. Vite リストから npx create-vite を選択してください。

      または、npm バージョン 5.1 以前の場合、 ターミナル Alt+F12 で npm install --g create-vite を実行して、 create-vite パッケージを自分でインストールします。 アプリケーションを作成するときに、 create-vite パッケージが保存されているフォルダーを選択します。

   4. テンプレート リストから、アプリケーションで使用する予定のフレームワークを対象とする、 コミュニティが管理する Vite テンプレート(英語)を選択します。

   5. オプション:

      JavaScript の代わりに TypeScript を使用するには、 TypeScript テンプレートの使用 チェックボックスを選択します。 PhpStorm は、アプリケーション用の .ts ファイルと tsconfig.json 構成ファイルを生成します。

4. 作成 をクリックすると、PhpStorm は必要なすべての構成ファイルを含む Vite-specific プロジェクトを生成し、必要な依存関係をダウンロードします。 PhpStorm は、アプリケーションを実行するためのデフォルト設定を含む npm dev 構成も作成します。

空の PhpStorm プロジェクトを作成する

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規プロジェクトダイアログが開きます。

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

空のプロジェクトに Vite をインストールする

1. Vite を使用する空のprojectを開きます。

2. コマンドライン シェルまたは組み込みの ターミナル （Alt+F12 ）で、次のように入力してください：

   npm install --save-dev vite

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

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

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

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

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

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

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

     • vite.config.mjs

     • vite.config.cjs

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

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

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

     

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

1. 実行 | 実行構成の編集 に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

   

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

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

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

   

3. オプション:

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

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

   

アプリケーションの実行

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

   

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

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

   

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

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

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

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

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

   

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

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

   

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

   

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

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

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

   

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

   ソースマップを無視して実際に実行されているコードをステップ実行するには、 を デバッグ ツールウィンドウのツールバーで押してください。

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

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

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

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

   

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

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

   

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

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

   

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

   ソースマップを無視して実際に実行されているコードをステップ実行するには、 を デバッグ ツールウィンドウのツールバーで押してください。

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

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

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

   

   新しいターミナルから開発モードでアプリケーションを起動した場合は、リンクの横にある ブラウザーでデバッグを開始する ボタンをクリックするだけです。

   

   デフォルトでは、ボタンは表示されません。 ボタンを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 詳細設定 に移動して、 JavaScript and TypeScript 領域で ターミナルの localhost リンクに 'ブラウザでデバッグを開始' ボタンを表示する チェックボックスを選択します。