Svelte

WebStorm は、構文のハイライト、自動インポートを備えたコード補完、リファクタリング、ナビゲーション、インテンション、コードの折りたたみ、ライブテンプレートのサポート、正しいフォーマットなどの基本的な洗練されたフレームワーク(英語)機能を提供します。

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Svelte プラグインをインストールして有効にします。

Svelte アプリケーションを作成する

Svelte アプリケーションを作成する推奨方法は、Svelte チームの公式アプリケーションフレームワークである SvelteKit(英語) を使用することです。

コマンドラインシェルまたは組み込みターミナル (Alt+F12) を開き、npx sv create <project_name> と入力します。
開始されるウィザードの質問に答えます。
Svelte 固有の構造 ( ファイル | オープン ) で生成されたアプリケーションを開き、npm install を実行して依存関係をインストールします。

スベルト公式サイト(英語)の詳細を参照してください。

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

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

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

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

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

ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクト、Git | クローン、VCS | バージョン管理から取得を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

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

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

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

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

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

セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。
開かない : この場合、WebStorm はプロジェクトを開きません。

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

Svelte コードでコーディング支援を構成する

Svelte 言語サーバー(英語)との統合により、Svelte コードで型チェックと補完を行うことができます。あるいは、WebStorm 内部インスペクションおよびコード補完のみを使用することもできます。

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | TypeScript | Svelte に移動します。
コーディングの支援を受ける場所を指定します。
- Svelte Language Server を使用するには、「有効」を選択します。
- WebStorm 内部 WebStorm インスペクションおよびコード補完を使用するには、無効を選択します。

コードを記述して編集する

.svelte コンポーネントと関連ファイルでは、WebStorm は構文のハイライト、コード補完は自動インポート、リファクタリング、ナビゲーション、インテンション、コードの折りたたみ、ライブテンプレートのサポート、および正しいフォーマットを提供します。

Svelte コンポーネントの作成

プロジェクトツールウィンドウ Alt+1 で、新しいコンポーネントの親フォルダーを選択し、リストから洗練されたコンポーネントを選択します。

コード補完

共通の補完に加えて、WebStorm は Svelte 固有のシンボルの補完を提供します。

WebStorm は、入力時に補完候補を表示します。あるいは、完了するシンボルにキャレットを置き、Ctrl+Space を押します。

クラウドの完成

WebStorm は、Svelte アプリケーションのテンプレート部分のコンポーネントプロパティ、インポートステートメント、およびタグにクラウドの完成(英語)を提供します。

AI Assistant を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。

Cloud Completion は、コンテキストを考慮して構文的に許容可能なソリューションを提案し、さまざまなコードインスペクションを事前に実行して、エラーの原因となるバリエーションを拒否します。

クラウド補完を有効にする

AI Assistant プラグインをインストールして有効にします(英語)。
Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。
クラウド補完候補を有効にするチェックボックスを選択します。ユニバーサル補完チェックボックスを選択します。

自動インポート

WebStorm は、.svelte および JavaScript ファイルにコードを入力または完成させると、オンザフライでインポートステートメントを生成します。

インポートされていないシンボルには下線が付いています。import ステートメントを挿入するには、下線付きの記号の上にマウスを置き、ポップアップ内のインポート <シンボル名> リンクをクリックします。

あるいは、インポートするシンボルにキャレットを置き、Alt+Enter を押して、リストからインポート <シンボル名> を選択します。

自動インポートの詳細を参照してください。

コードのリファクタリング

リファクタリングするコードフラグメントを選択するか、その中にキャレットを配置し、Ctrl+Alt+Shift+T を押して、リストから必要なリファクタリングを選択します。

コードリファクタリング、JavaScript のリファクタリング、TypeScript のリファクタリングの詳細を参照してください。

コンポーネントの使用箇所を移動する

インレイヒントを使用して、コンポーネントからその使用箇所に移動します。コンポーネントが複数回使用されている場合、WebStorm は検出された使用箇所のリストを表示します。関連する使用箇所を選択して、そこに移動します。

コンポーネントの使用箇所を表示ヒントはデフォルトで表示されます。これをオフにするには、Ctrl+Alt+S を押して設定を開き、エディター | インレイヒントを選択します。次に、コードビジョンのコンポーネントの使用箇所チェックボックスをオフにします。

または、エディターでコンポーネントの使用箇所を表示ヒントを右クリックし、コードビジョンを隠す: コンポーネントの使用箇所のインレイヒントを選択します。

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

package.json の dev スクリプトの横にあるガターでをクリックするか、ターミナル Alt+F12 で npm run dev コマンドを実行するか、npm ツールウィンドウ ( 表示 | ツールウィンドウ | npm) で dev タスクをダブルクリックします。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが SvelteKit で生成された場合、デフォルトの URL は http://localhost:8080/ です。このリンクをクリックすると、アプリケーションが表示されます。

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

上記のように、WebStorm 新規プロジェクトウィザードで SvelteKit(英語) を使用して作成されたアプリケーションの場合、WebStorm はデフォルト名 dev で npm 構成を生成します。この構成により、開発サーバーが起動し、アプリケーションが開発モードで起動します。

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

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

実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから npm を選択します。
開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの dev スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。
オプション:
ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。
アプリケーションをデバッグする場合は、Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。

アプリケーションの実行

ツールバーの実行ウィジェットのリストから、npm タイプの実行構成を選択します。これは、自動生成された開発構成、または上記のように自分で作成したカスタム構成にすることができます。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが SvelteKit で生成された場合、デフォルトの URL は http://localhost:8080/ です。このリンクをクリックすると、アプリケーションが表示されます。
または、上記のように、 WebStorm が起動時にアプリケーションを開くようにします。
開発サーバーが稼働しているときは、ソースファイルを変更して更新を保存するとすぐに、アプリケーションが自動的に再ロードされます。

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

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

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

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

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

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

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

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

コードにブレークポイントを設定します。
上記の説明に従って npm 構成を作成します。
SvelteKit を使用してアプリケーションを作成した場合、WebStorm はデフォルト名 dev で npm 構成をすでに生成しています。構成は実行ウィジェットから利用できます。
開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの dev スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。
ブラウザー / Live Edit タブで、起動後チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、JavaScript デバッガーを使用するチェックボックスを選択して、アプリケーションを実行する URL を指定します。
実行をクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にあるをクリックします。
WebStorm はアプリケーションを開発モードで実行し、同時にデバッグセッションを起動します。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。

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

コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL をコピーして、後で JavaScript デバッグ構成で指定します。
JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 実行構成の編集に移動し、をクリックして、リストから JavaScript デバッグを選択します。
開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。この URL は、上記のように、実行ツールウィンドウまたはターミナルにコピーできます。
デバッグをクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にあるをクリックします。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。

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

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

コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。Ctrl+Shift を押したまま、この URL リンクをクリックします。WebStorm は、タイプ JavaScript デバッグの自動生成された構成でデバッグセッションを開始します。

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

アプリケーションをテストする

WebStorm で Svelte アプリケーションをテストする推奨方法は、Vitest フレームワークを使用することです。

上記のように SvelteKit を使用してアプリケーションを作成する場合は、プロジェクト生成ウィザードを通過するときに単体テスト用に Vitest を追加オプションを選択します。

プロジェクト内で複数のフレームワークを使用する

場合によっては、1 つの Svelte プロジェクト内で他のフレームワークを使用する必要があることがあります。

各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .ws-context を作成し、各ファイルまたはフォルダーで使用するフレームワークを指定します。このファイルの設定は、デフォルトの構成を上書きします。

プロジェクトルートで、コンテキストメニューから新規 | ファイルを選択し、ファイル名として .ws-context を指定します。
.ws-context では、次の 2 種類のプロパティを使用します。
- コンテキスト値文字列を持つ <context-name>
- コンテキスト詳細オブジェクトを持つ GLOB パターン
次のコンテキスト値を使用します。
- framework : vue、angular、react、svelte、astro
- angular-template-syntax : V_2 , V_17
- nextjs-project : nextjs
- astro-project : astro
- vue-store : vuex , pinia
- vue-class-component-library : vue-class-component、vue -property-decorator、vue-facing-decorator
- jsdoc-dialect : jsdoc-typescript , jsdoc-closure
簡単にするためにパスのネストを使用します。
- GLOB パスの最後のセグメントはファイル名パターンであり、* ワイルドカードのみがサポートされます。
- 最後のセグメントが ** の場合、ネストされたすべてのディレクトリとファイルと一致します。
- 最上位レベルのコンテキストプロパティには /** パターンが必要です。
複数のパターンが同じファイル名に一致する場合、曖昧さを解消するために次のルールが使用されます。
- ** セグメントを除いて、パスセグメント数が最大となるパターンを選択します。
- 純粋なファイル名パターンであるパターンを選択します。つまり、** または / で終わらないパターンを選択します。
- 最初に定義されたパターンを選択します。

サンプル

さまざまなフォルダーで使用されている多数のフレームワークを含むプロジェクトがあるとします。

プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context に追加します。

{
  "framework": "vue",
  "angular-template-syntax": "V_2",
  "src/**/app/**": {
    "framework": null,
    "app.component.html" : {
      "framework": "angular",
      "angular-template-syntax": "V_17"
    }
  },
  "src/**/p*-editor/*.html" : {
    "framework" : "angular"
  }
}
        

最終更新日: 2025 年 4 月 10 日

WebStorm 2025.1 ヘルプ