ライブテンプレート
ライブテンプレートを使用して、ループ、条件、宣言、print ステートメントなどの一般的な構造をコードに挿入します。
コードスニペットを展開するには、対応するテンプレートの省略形を入力して Tab を押します。Tab を押し続けると、テンプレート内の 1 つの変数から次の変数に移動します。Shift+Tab を押して、前の変数に移動します。
ライブテンプレートの種類
次のタイプのライブテンプレートが区別されます。
シンプルなテンプレートは固定のプレーンテキストのみを含みます。単純なテンプレートを展開すると、そのテキストがソースコードに自動的に挿入され、省略形が置き換えられます。例:
flowは@flowアノテーションを挿入し、vbaseは Vue シングルファイルコンポーネント用のスタブに展開されます。
パラメーター化されたテンプレートには、ユーザー入力を可能にする変数が含まれています。パラメーター化されたテンプレートを展開すると、変数は、ユーザーが手動で指定するための入力フィールドに置き換えられるか、WebStorm によって自動的に計算されます。例:
importitemsはimportステートメントに展開され、最初にパスを指定してから、インポートされたメンバーをパラメーターとして指定できます。
囲みテンプレートは、選択したコードのブロックをユーザーが指定したテキストで囲みます。例:
Tは、名前を指定できるタグのペアに展開されます。また、コードブロックを選択し、Ctrl+Alt+J を押してテンプレートの選択ポップアップを開き、Tテンプレートを選択して、選択肢をタグのペアでラップすることもできます。
JavaScript 後置テンプレートはライブテンプレートですが、既存のコードの構造を作成します。例: 式の後に .if を入力して、対応するポストフィックスの補完を呼び出し、式を if ステートメントでラップすることができます。
ライブテンプレートの構成
ライブテンプレートを構成するには、エディター | ライブテンプレート設定ページ Ctrl+Alt+S を開きます。ライブテンプレートページでは、使用可能なすべてのライブテンプレートを表示し、編集して新しいテンプレートを作成できます。
テンプレートの検索と編集を簡単にするために、テンプレートはグループに分割されています。テンプレートを別のグループに移動するには、テンプレートを右クリックして移動を選択し、必要なグループ名を選択します。
各ライブテンプレートは、英数字、ドット、ハイフンを含む省略形で定義されます。略語はグループ内で一意である必要がありますが、同じ略語が異なるグループで使用され、対応するライブテンプレートのコンテキストに従って異なる構成に拡張される場合があります。変更されたデフォルトのテンプレートの略語は、リストに青色のフォントで表示されます。
変更したテンプレートをデフォルト設定に復元する
設定ダイアログのライブテンプレートページで、復元したいテンプレートを右クリックし、デフォルトの復元をクリックします。
関連ページ：
ライブテンプレート変数
ライブテンプレートの省略形を展開すると、その変数は値を入力できる入力フィールドとして表示されるか、値に置き換えられます。これらは、変更可能なデフォルト値、または関数を使用して計算された値である場合があります。テンプレート内で変数を宣言するには、次の形式を使用します: 式では、ドル文字を開閉せずに変数名を使用します（例:）。式を使用して各変数を定義し、式が評価に失敗した場合のデフォルト値を提供します。この式には、次の構成が含まれる場合があります。二重引用符で囲まれた文字列定数、ライブテンプレートで定...
JavaScript 後置テンプレート
後置コード補完では、入力したばかりの式の周囲にテンプレートコードを追加できます。ドットの後に略語（後置）を入力して展開キー（デフォルトでは）を押すか、コード補完ポップアップで略語を選択すると、テンプレートが展開されます。WebStorm には、定義済みの後置テンプレートのセットが付属しており、JavaScript および TypeScript 用に独自のカスタム後置テンプレートを定義できます。カスタムテンプレートの作成を参照してください。JavaScript の事前定義テンプレートは Type...
ライブテンプレートを作成する
次の手順例は、現在の日付、ユーザー名、入力フィールドに展開される 2 つのユーザー定義変数を使用して、コメントのテンプレートを作成する方法を示しています。を押して設定を開き、を選択します。新しいライブテンプレートを作成するテンプレートグループ（たとえば、other）を選択します。テンプレートグループを選択しない場合、ライブテンプレートがユーザーグループに追加されます。をクリックし、ライブテンプレートを選択します。テンプレートが使用可能なコンテキストを指定します。デフォルトではコンテキストは指定さ...
ファイルテンプレートを共有する
ファイルテンプレートを作成または変更する場合は、次のいずれかのスコープ内で実行します (のスキームパラメーターによって決定されます)。デフォルト: IDE レベルで作成されたファイルテンプレート。これらのテンプレートは、現在の IDE インスタンスで開くすべてのプロジェクトで使用できます。特定のプロジェクトに関係なく、好みの個人用テンプレートとして使用します。WebStorm は、グローバルテンプレートを fileTemplates の IDE 構成ディレクトリに保存します。プロジェクト: 現在のプロ...