言語インジェクション
言語インジェクションを使用すると、ファイルのメイン言語とは異なるプログラミング言語のコードを操作できます。
WebStorm は、HTML、CSS、XML、JSON、RegExp、文字列とテンプレートリテラル内、XML に似た言語のタグと属性内の他のコードフラグメントを編集するための包括的な言語支援を提供します。
始める前に
プラグインのインストールの説明に従って、設定 | プラグインページのインストール済みタブで IntelliLang バンドルプラグインが有効になっていることを確認します。
一時的に言語をインジェクションする
デフォルトでは、IDE は一時的に言語を挿入します。これは、埋め込まれた要素を削除すると、インジェクションも失われることを意味します。
言語を挿入する文字列またはテンプレートのリテラル、タグ、属性内にキャレットを配置し、Alt+Enter を押します（またはインテンションアクションアイコン
を使用します）。言語または参照の挿入を選択し、インジェクションする言語を選択します。
言語インジェクションコメントを使用する
言語をインジェクションするとき、WebStorm はアノテーションを加えることを提案します。提案を受け入れるには Alt+Enter を押します。
ターゲット文字列リテラルの前に空白行を追加して、次のコメントを入力することもできます。
language=<language_ID>
コメントについては、インジェクションしたい言語の構文を使用してください。言語 ID は一般的に直感的です。たとえば、SQL、RegExp、XML、HTML などです。
設定で言語 ID を確認することもできます。Ctrl+Alt+S を押して設定を開き、を選択します。言語のインジェクションルールをダブルクリックすると、言語 ID が ID フィールドに指定されます。
言語フラグメントは、フラグメントを構文的に完全な言語単位に変換するラッパーとして一緒に作用する接頭辞および接尾辞と組み合わせることができます。コードを編集するときは、接頭辞と接尾辞はフラグメントエディターでのみ表示されます。メインエディターには表示されません。
接頭辞と接尾辞は、次のようにインジェクションコメントに含めることができます。
インジェクションエディターを開く
挿入されたコード部分内にキャレットを置き、Alt+Enter を押します (またはインテンションアクションアイコン
を使用します)。<言語 ID> フラグメントの編集を選択します。
WebStorm は、挿入された言語でコードを編集するための専用のエディターセクションを開きます。このエディターは、コード補完、インスペクション、インテンション、コードスタイルアクションなどの完全なコーディング支援を提供します。
インジェクションをキャンセルする
コードフラグメントにキャレットを置き、Alt+Enter を押して、リストからを選択します。
あるいは、インジェクションコメントを削除するだけです。
インテンションアクションバルブアイコンを無効にする
エディターでインテンションアクションアイコン を非表示にするには、次の手順を実行します。
Ctrl+Alt+S を押して設定を開き、を選択します。
インテンションバルブを表示するチェックボックスをクリアします。
変更を適用し、ダイアログを閉じます。
自動インジェクションのルールを構成する
WebStorm には、IDE がコード内の特定の場所に言語を自動的に挿入するための事前定義されたルールのセットがあります。
設定 Ctrl+Alt+S のエディター | 言語インジェクションページで言語インジェクションルールを設定できます。
定義済みのすべてのインジェクションルールはビルトインスコープ用に設定されています。言い換えれば、それらはグローバルです（したがってすべての WebStorm プロジェクトで利用可能です）。カスタムルールは IDE または 1 つのプロジェクトに対してのみ設定できます。カスタムインジェクションの範囲を変更するには、
を使用してください。
VCS を介してカスタムルールを共有するには、ツールバーの対応するオプションを使用して、カスタムルールをプロジェクトスコープに移動します。そうすることで、バージョン管理下に置くことができるカスタムルールを使用して IntelliLang.xml という名前の新しいファイルを .idea ディレクトリに作成します。
VCS を使用しない場合は、ルールを XML ファイルにエクスポートして（ツールバーの 
をクリック）、別のプロジェクトにインポートすることで、ルールを共有できます。
カスタムインジェクションルールを設定するには、
をクリックして新しいルールを追加するか、あらかじめ定義されたルールをコピーして設定を変更します。
言語インジェクションの背景を構成する
JavaScript、TypeScript、HTML、XML、Pug インジェクションの場合、背景にカスタムカラーを使用できます。
設定ダイアログ (Ctrl+Alt+S) を開き、に移動して、インジェクションの背景色をカスタマイズする言語を選択します。
中央のペインのリストから注入された言語フラグメントを選択し、右側のペインでバックグラウンドチェックボックスを選択します。
選択した言語が別の言語から背景色を継承する場合、バックグラウンドフィールドは無効になります。継承された設定を上書きするには、まず次の値を継承チェックボックスをオフにします。
バックグラウンドチェックボックスの横にあるフィールドをクリックし、開いた色を選択しますダイアログで色を選択します。
関連ページ：
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
メソッドパラメーター情報の表示
パラメーターヒントは、メソッドおよび関数の呼び出しのパラメーターの名前を示します。パラメーターヒントは、関数呼び出しのパラメーターの横にエディター内に表示されるため、コードが読みやすくなります。エディターでパラメーターヒントをオフにして、を押すとポップアップで表示することができます。WebStorm は、補完リストのパラメーターヒントも表示し、その後、選択した関数のパラメーターヒントを含むツールチップを表示します。エディターでパラメーターヒントを表示する：デフォルトでは、リテラルまたは関数式