WebStorm 2024.3 ヘルプ

Vite

WebStorm は、フロントエンド開発エクスペリエンスを向上させる Vite(英語) ビルドツールと統合されています。Vite は、開発サーバーとビルドコマンドで構成されます。ビルドサーバーは、ネイティブ ES モジュールを介してソースファイルを提供します。build コマンドはコードを Rollup にバンドルします。Rollup は、本番用に高度に最適化された静的アセットを出力するように事前構成されています。

WebStorm は、Vue style タグで tsconfig.json および jsconfig.json パスマッピングをサポートし、Vite エイリアス(英語)を認識します。

異なる Vite 構成を持つ複数のモジュールで構成されるプロジェクトでは、WebStorm は各モジュールに関連する構成ファイルを自動的に検出し、そこからモジュール解決ルールを使用できます。以下の使用する Vite 構成ファイルの指定を参照してください。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. 設定で Vite プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに Vite と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

新しい Vite アプリケーションを作成する

新しい Vite アプリケーションを起動するための推奨される方法は、create-vite(英語) パッケージです。WebStorm は、npx (英語) を使用してこのパッケージをダウンロードして実行します。その結果、開発環境は、Vite と、ReactVue.jsSvelte などの一般的なフレームワークの基本テンプレートを使用するように事前構成されます。

もちろん、自分で create-vite をダウンロードしたり、空の WebStorm プロジェクトを作成してそこに Vite をインストールしたりすることもできます。

create-vite で Vite アプリケーションを生成する

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

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

  3. 右側のペインで:

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

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

    3. Vite リストから、npx create-vite を選択します。

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

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

    5. オプション:

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

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

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

この場合、ビルドパイプラインを自分で構成する必要があります。Vite オフィシャル Web サイト(英語)からプロジェクトに Vite を追加する方法については、こちらを参照してください。

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

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

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

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

  1. Vite を使用する空のプロジェクトを開きます。

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

    npm install --save-dev vite

既存の Vite アプリケーションから始める

既存の Vite アプリケーションの開発を継続するには、WebStorm で開き、必要な依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

  • ウェルカム画面でオープンをクリックするか、メインメニューからファイル | オープンを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ウェルカム画面でリポジトリのクローンをクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクトGit | クローンVCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

依存関係をダウンロードする

  • ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。

    Open an application and download the dependencies

    npm(英語)Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。

  • または、エディターの package.json のコンテキストメニューまたはプロジェクトツールウィンドウ Alt+1 から 'npm install' の実行または実行 'yarn install' を選択します。

プロジェクトのセキュリティ

WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

Untrusted project warning

次のいずれかのオプションを選択します。

  • セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。

  • 開かない : この場合、WebStorm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

WebStorm で Vite を構成する

Vite 構成ファイルを作成する

  • プロジェクト構造に応じて 1 つまたは複数の構成ファイルを作成します。プロジェクトツールウィンドウ Alt+1 で親フォルダーを選択し、コンテキストメニューから新規 | JavaScript ファイルを選択します。

    Create a Vite configuration file

    受け入れ可能な名前は vite.config.js / vite.config.tsvite.config.mjs または vite.config.cjs です。

    Vite オフィシャル Web サイト(英語)の詳細を参照してください。

  • 必要に応じて、後で import ステートメントで認識される alias を使用します。エイリアスの定義では必ず絶対パスを指定してください。Vite オフィシャル Web サイト(英語)から詳細を参照してください。

    Completing alias in import statements

使用する Vite 構成ファイルを指定する

Vite 構成ファイルの分析に基づいて、WebStorm は Vite 構成を理解し、モジュールを解決し、JavaScript および TypeScript ファイルのコーディング支援を提供します。

WebStorm では、自動と手動の 2 つの構成モードから選択できます。

自動構成では、WebStorm は各 JavaScript または TypeScript ファイルに関連する Vite 構成ファイルを自動検出します。

手動構成では、プロジェクトで使用する Vite 構成ファイルを指定します。Vite 構成ファイルの名前が WebStorm で認識されない場合は、手動構成が便利です。以下の認識される Vite 構成名のリストを参照してください。

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

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

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

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

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

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

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

      • vite.config.mjs

      • vite.config.cjs

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

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

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

      Select a vite configuration file manually

Vite アプリケーションを実行する

  1. package.jsondev スクリプトの横にあるガターで the Run icon をクリックするか、ターミナル Alt+F12npm run dev を実行するか、npm ツールウィンドウ ( 表示 | ツールウィンドウ | npm) で dev タスクをダブルクリックします。

    Run a Vite app in the development mode from package.json
  2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが create-vue で生成された場合、デフォルトの URL は http://localhost:5173/ です。このリンクをクリックすると、アプリケーションが表示されます。

    Vue.js app is running in the development mode

実行 / デバッグ構成を介して Vite アプリケーションを実行する

前述のように、WebStorm 新規プロジェクトウィザードで create-vite を使用して作成されたアプリケーションの場合、WebStorm はデフォルト名 npm devnpm 構成を生成します。この構成では、開発サーバーを起動し、アプリケーションを開発モードで開始する vite コマンドを実行します。

それ以外の場合は、ホスト、ポートなどの実際の設定を手動で実行 / デバッグ構成を作成するする必要があります。

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

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

    Open the Edit Configurations dialog

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

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

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

    npm run/debug configuration
  3. オプション:

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

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

    Browser / Live Edit tab: select browser

アプリケーションの実行

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

    Run a Vite app in the development mode via a run/debug configuration
  2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

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

    Running Vite app: the Development server is ready

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

Vite アプリケーションをデバッグする

デバッグセッションは、実行 / デバッグ構成を起動するから開始することも、開発モードでアプリケーションが実行されている URL を表示する実行ツールウィンドウから開始することもできます。

実行 / デバッグ構成を介してデバッグを開始する

Vite アプリケーションをデバッグするには、2 つの実行 / デバッグ構成が必要です。

  • 上記のように、開発モードでアプリケーションを起動するための npm 構成。

  • 開発モードで実行されているアプリケーションにデバッガーを接続するための JavaScript デバッグ構成。

npm 実行 / デバッグ構成を使用して Vite アプリケーションを実行およびデバッグするに従って、npm 構成内に JavaScript デバッグ構成を作成して、一度に起動することができます。

または、JavaScript デバッグ実行 / デバッグ構成でデバッグを開始するに従って、npmJavaScript デバッグの実行 / デバッグ構成を個別に作成して起動します。

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

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

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

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

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

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

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

    npm configuration, Browser tab
  5. 実行をクリックします。

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

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

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

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

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

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

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

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

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

    Create a JavaScript Debug configuration: specify the URL
  5. デバッグをクリックします。

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

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

実行ツールウィンドウまたは組み込みのターミナルからデバッグを開始する

アプリケーションが localhost の開発モードで実行されている場合、特に create-vite で生成された場合は、> 実行ツールウィンドウまたは組み込みのターミナルから直接デバッグセッションを開始できます。

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

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

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

    Starting a debugging session from the Run tool window, the application is running on localhost

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

    New Terminal: the Start debugging in browser button

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

Node.js 17 以降のトラブルシューティング

Node.js バージョン 17 以降を使用している場合、デバッグセッション中にネットワーク接続の問題が発生し、デバッガーの接続やソースマップのロードで問題が発生する可能性があります。

回避策は、--host 127.0.0.1 をサーバーに渡すことです。これは、次のいずれかの方法で行うことができます。

  • package.jsondev スクリプトを更新します。

    "dev": "vite --host=127.0.0.1"
  • あるいは、dns.setDefaultResultOrder('ipv4first')vite.config.ts に追加します。

関連ページ:

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

React

React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。WebStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に:お使いのコンピューターに Node.js がインストールされていることを確認してください。React、JavaScript Debugge...

Svelte

WebStorm は、構文のハイライト、自動インポートを備えたコード補完、リファクタリング、ナビゲーション、インテンション、コードの折りたたみ、ライブテンプレートのサポート、正しいフォーマットなどの基本的な洗練されたフレームワーク機能を提供します。始める前に:お使いのコンピューターに Node.js がインストールされていることを確認してください。JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Svelte プラ...

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...

GitHub でホストされているプロジェクトを管理する

プロジェクトをチェックアウトする (クローン):WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...

npm、pnpm、Yarn

WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...