言語と参照のインジェクション

一時的な言語インジェクションを追加する

1. 言語を挿入する文字列またはテンプレートのリテラル、タグ、属性内にキャレットを配置し、Alt+Enter を押します（またはインテンションアクションアイコン を使用します）。

2. 言語または参照の挿入を選択し、インジェクションする言語を選択します。

   

永続的な言語インジェクションを追加する

言語インジェクションコメント (アノテーション) を使用して、インジェクションされた言語の永続的なフラグメントを追加します。

• 言語をインジェクションするとき、WebStorm はアノテーションを加えることを提案します。提案を受け入れるには Alt+Enter を押します。

• ターゲット文字列リテラルの前に空白行を追加し、次のコメントを入力します。

  language=<language_ID>

  コメントについては、インジェクションしたい言語の構文を使用してください。言語 ID は一般的に直感的です。たとえば、SQL、RegExp、XML、HTML などです。

  設定で言語 ID を確認することもできます。Ctrl+Alt+S を押して設定を開き、エディター | 言語インジェクションを選択します。言語のインジェクションルールをダブルクリックすると、言語 ID が ID フィールドに指定されます。

• (オプション) コメントに接頭辞または接尾辞を含めます。

  // language=<language_ID> prefix=<prefix> suffix=<suffix>

  これは次の場合に必要です:

  • 文字列は不完全 / 部分的な SQL 文です

  • 文字列は、サポートされている呼び出し（select /where) など）で直接使用されていません。

フラグメントエディターを開く

1. 挿入されたコード部分内にキャレットを置き、Alt+Enter を押します (またはインテンションアクションアイコン を使用します)。

2. <言語 ID> フラグメントの編集を選択します。

   WebStorm は、インジェクションされた言語でコードを編集するための専用エディターセクションを開きます。このエディターは、コード補完、インスペクション、インテンションアクション、コードスタイルアクションを含む完全なコーディング支援機能を提供します。

一時的な参照インジェクションを追加する

1. 参照を挿入する文字列またはテンプレートリテラル内にキャレットを置き、Alt+Enter を押します (またはインテンションアクションアイコン を使用します)。

2. 言語または参照の挿入を選択し、オプションを選択します。例:

   • ファイル参照 : 指定されたファイルへの参照を追加します。

   インストールしたプラグインによっては、他の参照オプションが利用できる場合があります。

永続的な参照インジェクションを追加する

コメントを使用して永続的な参照インジェクションを追加します。

• ターゲット文字列リテラルの前に空白行を追加し、必要な値を含む // language= コメントを入力します。

  • // language=file-reference はファイルへの参照を追加します。

• コードフラグメントにキャレットを置き、Alt+Enter を押して、リストから言語または参照の挿入解除を選択します。

  

• あるいは、インジェクションコメントを削除するだけです。

インテンションアクションバルブアイコンを無効にする

エディターでインテンションアクションアイコン を非表示にするには、次の手順を実行します。

1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | 外観を選択します。

2. インテンションバルブを表示するチェックボックスをクリアします。

3. 変更を適用し、ダイアログを閉じます。

カスタムインジェクションルールの設定

1. 以下のいずれか 1 つを実行します:

   • 新しいルールを作成するには、ツールバーの をクリックし、ルールを適用するコンテキストを選択します。

     

   • 既存のルールを編集するには、そのルールを選択し、ツールバーの をクリックします。

     

   • 既存のルールに基づいてルールを作成するには、ベースとなるルールを選択し、ツールバーの をクリックし、コピーを選択してツールバーの をクリックします。

     

   言語インジェクション設定ダイアログが開きます。ダイアログ内のコントロールは、選択したインジェクションタイプによって異なります。

2. インジェクションする言語の ID または名前を指定してください。

   オプションで、挿入の前後に追加する文字シーケンスである接頭辞と接尾辞を指定します。これは、不完全な断片をラップするために必要になる場合があります。次のコード断片があるとします。

   const query = "SELECT * FROM users WHERE id = ?";

   接頭辞として SELECT、接尾辞として ; を挿入できます。あるいは、挿入言語として JSON を選択した場合は、接頭辞と接尾辞として波括弧と {} のペアを指定することもできます。

3. ルール型に応じて、配置パターンまたはテンプレートタグフィールドに、WebStorm がリテラルをインジェクションとして認識するコンテキストを定義するルールを入力します。ルールは、関数引数、変数初期化子、オブジェクトプロパティ、JSX 属性などを対象とすることができます。

   例 1 - JavaScript の文字列引数

   psiParameter().withName("query")

   例 2 - タグ付きテンプレート

   psiElement(JSStringTemplateExpression)

   ルールはプログラム構造インターフェースパターンから構築されており、実際には内部 WebStorm 言語のメソッドの連鎖呼び出しです。WebStorm が扱うように、プログラム構造インターフェースはファイルの構造を示します。

   定義済みのインジェクションルールを編集する場合、パターンはすでに指定されています。これにより、生産性と使いやすさが向上します。新しい設定を作成するよりも、これらの設定を利用することをお勧めします。

4. オプション:

   詳細設定領域では、追加設定を指定することで、インジェクションルールが適用されるコンテキストを絞り込み、インジェクションプロセスをよりきめ細かく制御できるようになります。

   • 値パターンフィールドに、言語を挿入するコンテキストを決定する正規表現を入力します。パターンの最初のキャプチャーグループを挿入対象として使用することで、特定のパターンに一致する値、パターンに一致する複数の部分にのみ言語を挿入するように手順を構成できます。

     例: ^javascript:(.*) は、ハイパーリンクの hrefs で JavaScript コードを実行するために使用できる javascript プロトコルと一致します。

   • 単一ファイル - このオプションがオフの場合、値のパターンに一致するフラグメントは、たとえばフラグメントエディターの観点から、別々の「ファイル」として別々に扱われます。

     このオプションがオンの場合、対応するフラグメントはすべてマージされて単一のユニット、つまり「ファイル」になります。

     値のパターンを考える

     xxx (.+) yyy (.+) zzz

     そしてフラグメント

     xxx select * yyy from family zzz ,

     このオプションがオフの場合、select * と from family は 2 つの独立したフラグメント（または「ファイル」）として扱われます。このオプションがオンの場合、select * from family は単一のユニットまたは「ファイル」として扱われます。

5. XML タグおよび XML 属性のインジェクションルールについては、言語インジェクション設定ダイアログ: XML タグの挿入および言語インジェクション設定ダイアログ: XML 属性の挿入を参照してください。