Vue.js

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

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

2. 新しい Vue コンポーネント ポップアップで、コンポーネントファイルの名前を入力し、コンポーネントタイプ (コンポジション API または オプション API) を選択します。

   

コンポーネントの抽出

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

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

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

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

   

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

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

  

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

  

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

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

  

完全なスロット名

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. 使用するサービスを指定します。

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

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

     TypeScript 言語サービスは、TypeScript バージョン 5.0.0 以降では動作しませんのでご注意ください。 そのため、プロジェクトでこれらのバージョンを使用している場合、エラーのハイライト表示は IntelliJ IDEA 内部コードインスペクションを通じて提供されます。

   • 無効 を選択すると、TypeScript 言語サービスと Vue 言語サーバーの両方がオフになり、IntelliJ IDEA 内部サポートからコーディング支援を受けられます。

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

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

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

インデントを構成する

デフォルトでは、すべてのトップレベルのタグの内容は、Vue.js 固有のスタイルで均一にインデントされます。 このインデントは、使用する言語によって設定できます。たとえば、HTML や Pug 固有にすることも可能です。

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

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

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

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

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

スペースを構成する

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

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

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

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

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

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

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

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

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

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

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

Prettier でコードを整形

• エディターで、再フォーマットするコードフラグメントを選択します。 ファイルまたはフォルダーを再フォーマットするには、 プロジェクト ツールウィンドウ (Alt+1) で選択します。 次に、コンテキストメニューから 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 言語サービス(英語)を介して実行されているため、IntelliJ IDEA との 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 タイプの実行構成を選択し、その横にある をクリックします。 これは、自動生成された dev 構成でも、 上記のように自分で作成したカスタム構成でもかまいません。

   

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

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

   

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

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

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

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

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

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

   コマンド フィールドで、リストから 実行 を選択し、次に スクリプト リストから実行するスクリプトを選択します。 ほとんどの場合、デフォルトの 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 デバッグ 構成を作成します。 これを行うには、メインメニューの 実行 | 実行構成の編集 に移動し、 をクリックして、リストから JavaScript デバッグ を選択します。

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

   

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

   

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

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

   

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

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

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

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

   

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