Vue.js

Vue.js コンポーネントを作成する

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

  

コンポーネントの抽出

1. 抽出してコンポーネント抽出を呼び出すテンプレートフラグメントを選択します。

   • インテンションアクションを使用するには、Alt+Enter を押してから、リストから Vue コンポーネントの抽出を選択します。

   • リファクタリングを使用するには、メインメニューまたは選択範囲のコンテキストメニューからリファクタリング | 抽出 | Vue コンポーネントの抽出を選択します。

2. 新しいコンポーネントの名前を入力します。この名前がすでに使用されているか無効な場合、WebStorm は警告を表示します。それ以外の場合は、新しい単一ファイルコンポーネントが作成され、親コンポーネントにインポートされます。

   

スクリプト、スタイル、テンプレートブロック内の完全なコード

• デフォルトでは、WebStorm は script ブロック内の ECMAScript 6 および style ブロック内の CSS にコード補完を提供します。

  

• template タグ、コード補完 Ctrl+Space 内、および Vue.js コンポーネントと属性の定義 Ctrl+B へのナビゲーションが利用可能です。

  

完全な Vue.js プロパティとメソッド

• WebStorm は、Vue.js のプロパティ、data オブジェクトのプロパティ、計算されたプロパティ、メソッドの補完も提案します。

  

完全なスロット名

• WebStorm は、ライブラリコンポーネントおよびプロジェクトで定義されたコンポーネントからのスロット(英語)名の補完を提供します。

  プロジェクトに名前付きスロットを持つコンポーネントが含まれている場合、WebStorm は template タグの v-slot ディレクティブにこれらの名前の提案を表示します。

  

• Vuetify(英語)、Quasar(英語)、BootstrapVue(英語) を使用している場合、スロット名にコード補完も使用できます。

  

別のファイルで定義された完全なコンポーネント

• コンポーネントが複数のファイルで定義されている場合(英語)、WebStorm はコンポーネントのパーツ間のリンクを認識し、プロパティ、データ、メソッドに適切なコード補完を提供します。

  例: コンポーネントのパーツが、vue ファイルで src 属性を介してリンクされている個別の JavaScript およびスタイルシートファイルで定義されている場合、JavaScript で定義されたプロパティは、メソッドと同様にテンプレートで適切に補完されます。

  

• コンポーネントの template プロパティのテンプレートリテラル内のテンプレートは、このコードが template タグ内にあるかのように補完されます。

  

  テンプレートが別の HTML ファイルで定義され、template プロパティにリンクされている場合、完了も使用できます。

Vue.js インジェクション内の完全なコード

HTML ファイル内の Vue.js インジェクション内で、WebStorm は Vue.js 構文を認識し、それに応じてコードをハイライトします。これらのライブラリをプロジェクトの依存関係に追加せずに、HTML ファイルの CDN からリンクされている Vue.js ライブラリからシンボルの補完を取得することもできます。

1. 外部 Vue.js ライブラリへの CDN リンクを含む HTML ファイルを開きます。WebStorm はリンクをハイライトします。

2. ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストからライブラリのダウンロードを選択します。または、リンクの上にマウスを置き、ライブラリのダウンロードをクリックします。

ライブラリは、設定 | 言語およびフレームワーク | JavaScript | ライブラリページの JavaScript ライブラリのリストに追加されます。詳細については、「CDN リンクを介して追加されたライブラリの構成」を参照してください。

パラメーターのヒントを設定する

1. 設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。

2. パラメーター名の Vue を展開します。

3. 対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。

   プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。

4. 一部のメソッドおよび関数では、WebStorm はどのコンテキストでもパラメーターヒントを表示しません。除外リスト ... をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

5. 任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名の Vue テンプレートチェックボックスをオフにします。

1. 使用するテンプレートの省略形を入力するか、Ctrl+J を押して、使用可能なテンプレートのリストから選択します。

2. テンプレートを展開するには、Tab を押します。

3. テンプレート内のある変数から別の変数に移動するには、Tab をもう一度押します。

   

1. 設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | TypeScript | Vue に移動します。

2. Vue 言語サーバーフィールドで、使用する Vue 言語サーバーのバージョンを指定します。

   • 提案されたデフォルトのバージョンを受け入れます。

   • 別のバージョンの @vue/language-server パッケージがインストールされている場合は、このバージョンがリストに表示されます。それを選択することも、デフォルトのバージョンを受け入れることもできます。

     

   • または、選択または をクリックして、カスタム @vue/language-server パッケージへのパスを指定します。

3. 使用するサービスを指定します。

   • デフォルトでは、自動オプションが選択されており、これは Vue 言語サーバー (Volar) がデフォルトで使用されることを意味します。

   • .ts および .vue ファイルで常に TypeScript 言語サービスを使用するには、従来の TypeScript サービスを選択します。

     TypeScript 言語サービスは、TypeScript バージョン 5.0.0 以降では機能しないことに注意してください。プロジェクトでこれらのバージョンのいずれかを使用している場合、エラーのハイライトは WebStorm 内部コードインスペクションを通じて提供されます。

   • TypeScript 言語サービスと Vue 言語サーバーの両方をオフにして、WebStorm 内部サポートからコーディング支援を受けるには、「無効」を選択します。

4. Vue 言語サーバーのデータに基づいてシンボルの種類を評価するには、サービス駆動型エンジンを有効にするチェックボックスを選択します。

   デフォルトでは、チェックボックスはオフになっているため、型評価、解決、コードインスペクション、およびリファクタリングは、WebStorm 内部 TypeScript エンジンからの型情報に基づいて行われます。

   このデフォルトの動作では、WebStorm 内部の TypeScript エンジンが使用する型評価アルゴリズムが Vue 言語サーバーのアルゴリズムと異なるため、パフォーマンスの問題や型解決のバグが発生する可能性があります。チェックボックスを選択すると、これらの問題を回避できる場合があります。

インデントを構成する

デフォルトでは、トップレベルのタグ内のコードは、Vue.js 固有のスタイルで均一にインデントされます。このインデントは、使用する言語に依存するように構成できます。たとえば、HTML や Pug 固有です。

1. 設定ダイアログ (Ctrl+Alt+S) で、エディター | コードスタイル | Vue テンプレートに移動し、タブとインデントタブを開きます。

2. デフォルトでは、すべてのトップレベルのタグの内容は、Vue.js 固有のスタイルで均一にインデントされます。デフォルトのインデント設定を受け入れるか、ページ上のコントロールを使用してカスタマイズします。設定を変更すると、右側のペインのプレビューに、変更がコードのフォーマットにどのような影響を与えるかが表示されます。

   トップレベルタグ内のコードをその言語に関してインデントするには、ブロックの言語に合わせるを選択します。

3. トップレベルのタグの子をインデントするフィールドで、コードに最初のインデントを付ける必要がある最上位のタグを指定します。

   デフォルトでは、template タグ内のコードのみに最初のインデントがあります。必要に応じて、コンマを区切り文字として使用して他のタグを追加します。例: フィールドで script を指定すると、すべての script タグ内のコードは、プレビューペインに示されているように最初のインデントを取得します。

スペースを構成する

1. デフォルトでは、WebStorm は、Mustache 構文による Vue.js テキスト補間(英語)の左波括弧（{）の後、終了 } の前にスペースを自動的に挿入します。

   スペースの自動挿入を抑制するには、設定ダイアログ (Ctrl+Alt+S) を開いてエディター | コードスタイル | Vue テンプレートに移動し、次にスペースタブを開いて補間チェックボックスをオフにします。

2. デフォルトでは、コードフラグメントをブロックコメントで囲むと、テキストはスペースなしで /* 文字を開いた直後に始まります。*/ 文字を閉じる前に、スペースも挿入されません。

   このデフォルトのコードスタイルは、ESLint などの一部のリンターのルールと競合する可能性があります。コードスタイルを改善するには、先頭と末尾のスペースで囲んでいるブロックコメントを構成します。

   設定ダイアログ (Ctrl+Alt+S) で、エディター | コードスタイル | JavaScript またはエディター | コードスタイル | TypeScript に移動し、コード生成タブを開いて、コメント領域のスペースとフォーマットを構成します。

ラッピングとブレースを構成する

1. 設定ダイアログ (Ctrl+Alt+S) で、エディター | コードスタイル | Vue テンプレートに移動し、折り返しと波括弧タブを開きます。

2. Vue.js 補間内の JavaScript 式(英語)に改行がある場合、WebStorm はこの JavaScript 式を新しい行から自動的に開始し、その後に新しい行を追加します。

   このデフォルトの動作を変更するには、'{{' の後の改行および '}}' の前の改行チェックボックスをオフにします。

3. Vue.js コードスタイル: ビジュアルガイドの説明に従って、複数の右マージンを構成します。

4. 折り返しオプションに従って、補間の折り返しを構成します。

Prettier でコードを整形

• エディターで、再フォーマットするコードフラグメントを選択します。ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウ Alt+1 で選択します。次に、Ctrl+Alt+Shift+P を押すか、コンテキストメニューから Prettier で整形を選択します。

• 特定のファイルに対して Prettier を自動的に実行するには、設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | Prettier に移動し、コードの再フォーマットについておよび保存時チェックボックスを使用して Prettier をトリガーするアクションを指定します。

  詳細については、保存時に Prettier を自動的に実行するおよび Prettier をデフォルトのフォーマッターとして設定するを参照してください。

Prettier コードスタイルルールを適用する

• Prettier が有効になっているプロジェクトで、package.json を開き、タブ上部のペインではいをクリックします。

  

• Prettier コードスタイルを再適用するには（ペインでいいえをクリックするかコードスタイルを変更した後）、Ctrl+Shift+A を押してアクションの検索リストから Prettier コードスタイルルールを適用するを選択します。

typescript-tslint-plugin をインストールして構成する

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

   npm install --save-dev typescript-tslint-plugin

2. tsconfig.json ファイルの plugins プロパティで、次のように入力します。

   { "compilerOptions": { "plugins": [{"name": "typescript-tslint-plugin"}] } }

3. typescript-tslint-plugin を使用している場合、TSLint は TypeScript 言語サービス(英語)を介して実行されているため、WebStorm との TSLint 統合を無効にして、エラー報告の重複を回避できます。

   これを行うには、設定ダイアログ (Ctrl+Alt+S) を開き、言語 & フレームワーク | TypeScript | TSLint に移動して、TSLint を使用不可にするを選択します。

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

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

   

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

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

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

   

3. オプション:

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

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

   

アプリケーションの実行

1. ツールバーの実行ウィジェットのリストから、npm タイプの実行構成を選択し、その横にある をクリックします。これは、自動生成された開発構成でも、上記のように自分で作成したカスタム構成でもかまいません。

   

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

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

   

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

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

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

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

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

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

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

   

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

   

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

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

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

   

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

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

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

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

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

   

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

   create-vue を使用してアプリケーションを生成した場合、WebStorm は、デフォルト名アプリケーションのデバッグとデフォルト URL http://localhost:5173 で JavaScript デバッグ実行 / デバッグ構成をすでに作成しています。JavaScript デバッグノードのリストからこの実行 / デバッグ構成を選択します。

   

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

   

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

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

   

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

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

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

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

   

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