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

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

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. 次のいずれかを実行します：

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

     

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

     

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

     

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

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

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

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

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

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

   例 1 - Any JavaScript string argument

   psiParameter().withName("query")

   例 2 - Tagged template

   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. For XML タグ and XML 属性 injection rules, see 言語インジェクション設定ダイアログ: XML タグの挿入 and 言語インジェクション設定ダイアログ: XML 属性の挿入。