ライブテンプレート変数
ライブテンプレートの省略形を展開すると、その変数は値を入力できる入力フィールドとして表示されるか、値に置き換えられます。 これらは、変更可能なデフォルト値、または 関数を使用して計算された値である場合があります。
テンプレート内で変数を宣言するには、次の形式を使用します: $VAR$
式では、ドル文字 $ を開閉せずに変数名を使用します(例: lowercaseAndDash(ComponentName))。
式を使って各変数を定義し、式の評価に失敗した場合のデフォルト値を設定します。
この式には、次の構成要素が含まれる場合があります:
二重引用符で囲まれた文字列定数
ライブテンプレートで定義されている他の変数の名前
可能な引数を持つ 定義済み関数
テンプレート変数を設定する
設定 ダイアログ(Ctrl+Alt+S )で、 に移動します。
変数を設定するテンプレートを選択します。
テンプレートテキストで変数を指定し、 変数を編集… をクリックします。
テンプレート変数の編集 ダイアログでは、各変数に対して以下の操作を実行できます。
変数名を変更します。
定義済み関数を使用して式を定義します。
式の評価が失敗した場合のデフォルト値を指定します。 デフォルト値は二重引用符で囲む必要があります。
式が正常に評価された場合にユーザーに入力を求めるときに変数をスキップするかどうかを指定します。
定義済みのテンプレート変数
WebStorm は、変更できない以下の定義済みライブテンプレート変数をサポートしています:
$END$はコードスニペットが完了したときのキャレットの位置を示し、 Tab を押して次の変数にジャンプすることはできなくなります。$SELECTION$は囲みテンプレートで使用され、ラップされるコードフラグメントを示します。 テンプレートが展開されると、テンプレートで指定されたとおりに選択されたテキストがラップされます。 例: コードでEXAMPLEを選択し、割り当てられた略語で"$SELECTION$"テンプレートを呼び出すか、 Ctrl+Alt+T を押してリストから目的のテンプレートを選択すると、WebStorm は選択部分を二重引用符で次のようにラップします:"EXAMPLE"。
ライブテンプレート変数で使用される関数
ライブテンプレート変数を定義するには、次の関数を使用できます:
機能 | 説明 |
|---|---|
| 現在の言語コンテキストでブロックコメントの終了を示す文字を返します。 |
| 現在の言語コンテキストでブロックコメントの開始を示す文字を返します。 |
| 文字列を キャメルケースに変換します。 例: |
| 文字列の最初の文字を大文字にします。 例: |
| 文字列内のすべての文字を大文字にし、パーツ間にアンダースコアを挿入します。 例: |
| システムクリップボードの内容を返します。 |
| 現在の言語コンテキストでコメントの終わりを示す文字を返します。 行コメントのある言語の場合、戻り値は空です。 |
| 現在の言語コンテキストでコメントの開始を示す文字を返します。 行コメントのある言語の場合、戻り値は lineCommentStart() と同じように行コメントの始まりです。 |
| 変数の位置で コード補完を呼び出します。 |
| 関数にパラメーターとして渡された全ての文字列を連結して返します。 例: |
| 反復可能な変数の名前を返します。 |
| 配列の要素のリストを返します。 |
| 最も一般的に使用される名前( |
| 変数の命名規則を参照するコードスタイル設定に従って、変数の型と初期化式に基づいて、変数の推奨名を返します。 例: 反復処理内で要素を保持する変数の場合、WebStorm は反復されるコンテナの名前を考慮して最も妥当な名前を推測します。 |
| 現在のシステム日付を返します。 デフォルトでは、パラメーターなしで、現在のシステム形式で日付を返します。 別の形式を使用するには、 SimpleDateFormat(英語) 仕様に従ってパラメーターを指定します。 例: |
| テーブルまたはビューの列のリストを返します。 |
| テーブルまたはビューの名前を返します。 |
| 文字列の最初の文字を対応する小文字に置き換えます。 例: |
| 式が return 文で使用されている場合は、デフォルト値を返します。 式がエラー・型である場合は、 |
| テンプレートが展開されたときに補完候補として提案される文字列のリストを返します。 例: |
| Java 文字列で利用できるように、特殊文字をエスケープします。 例: タブ文字を |
| テンプレートが展開される式の予想される型を返します(割り当ての右側、 Java コンテキストでのみ使用できます。 |
| 現在のファイルの名前とその拡張子を返します。 |
| 現在のファイルの名前を拡張子なしで返します。 |
| 現在のファイルへの絶対パスを返します。 |
| 現在のプロジェクトに相対的な現在のファイルパスを返します。 特定のファイルの相対パスを確認するには、ファイルを右クリックして 参照をコピー を選択するか、 Ctrl+Alt+Shift+C を押します。 |
| パラメーターとして渡された文字列の最初の単語を返します。 例: |
| 文字列として渡された Groovy スクリプトを実行します。 最初の引数は、スクリプトのテキストまたはスクリプトを含むファイルへのパスを含む文字列です。 この関数は、他のオプションの引数を 次の例は、指定された文字列 (別の変数
groovyScript("_1.toUpperCase()", MyVar)
次の例は、選択したテキストを単語に分割し、番号付きリストとして表示する
groovyScript("def result = ''; _1.split().eachWithIndex { item, index -> result = result + index.next() + '. ' + item + System.lineSeparator() }; return result;", SELECTION)
最後の例では、テキストを選択して Ctrl+Alt+T (囲む) を押して適用する必要があることを意味する |
| 現在の JavaScript 配列の名前を返します。 |
| 現在の JavaScript クラスの名前を返します。 |
| 現在の JavaScript コンポーネントの型を返します。 |
| モジュールの名前に基づいて、 |
| 現在の JavaScript メソッドの名前を返します。 |
| 現在の JavaScript クラスの完全な名前を返します。 |
| Boolean パラメーターは、現在のコンテキストで定数が許可されるかどうかを決定します。 パラメーターが指定されていない場合は、定数が許可されます。 テンプレートが展開されると、TypeScript および ES6 の場合は |
| ファイル名に基づいて、タイプ |
| 最も一般的に使用される名前( |
| 変数の命名規則を参照するコードスタイル設定に従って、変数の型と初期化式に基づいて、変数の推奨名を返します。 例: 反復処理内で要素を保持する変数の場合、WebStorm は反復されるコンテナの名前を考慮して最も妥当な名前を推測します。 |
| 現在の言語コンテキストでの行コメントの開始を示す文字を返します。 |
| 現在の行番号を返します。 |
| 文字列を小文字に変換し、セパレータとして n ダッシュを挿入します。 例: |
|
例えば、 |
| 文字列を snake_case に変換します。 例えば、 |
| 区切り文字としてスペースを含む指定された文字列を返します。 例: |
| パラメーターとして渡された文字列内のスペースをアンダースコアに置き換えます。 例: |
| 指定された区切り文字までの部分文字列を返します。 これは、テストファイル名の拡張子を削除できます。 例: component-test.js という名前のファイルで使用されている場合、 |
| 現在のシステム時刻を返します。 デフォルトでは、パラメーターなしで、現在のシステム形式で時刻を返します。 別の形式を使用するには、 SimpleDateFormat(英語) 仕様に従ってパラメーターを指定します。 例: |
| 下線付きの文字列(snake_case など )を camelCase に変換します。 例: |
| 文字列のアンダースコアをスペースに変換します。 例: |
| 現在のユーザーの名前を返します。 |
サンプル
デフォルトの a-component と同様に、Angular コンポーネントの ngcomp テンプレートを作成しましょう。 テンプレートには 3 つの変数があります。
最初の
$ComponentName$は、新しいコンポーネントクラスの名前のプレースホルダーになります。2 番目の
$selector$は、コンポーネントセレクターの名前になります。3 番目の
$END$は、テンプレートが展開され、$ComponentName$ および$selector$プレースホルダーが入力された後の、最後にキャレットが配置される場所を示します。
エディターで、テンプレートで使用するコードを選択し、 Ctrl+Shift+A を押して、 「ライブテンプレートとして保存…」 アクションを呼び出します。

テンプレートを呼び出すために使用する略語(
ngcompなど)を入力し、テンプレートの説明(新しい Angular コンポーネントなど)を追加します。
テンプレートに変数を追加します。
SearchComponentを$ComponentName$に置き換えます。Component({})内にselector: '$selector$',を追加します。$END$をngOnInit(){}に追加します。

Angular スタイルガイド(英語)によると、セレクター名は通常、コンポーネント名の破線バージョンであるため、最初にコンポーネント名を指定するのが理にかなっています。 ただし、セレクターはコードの最初にあります。
この問題を解決するには、 変数を編集… をクリックし、矢印アイコンを使用して変数の順序を調整します。 これで、
ComponentNameが最初に来て、テンプレートの展開時にキャレットが最初にそれに移動します。
クラス名のみを指定し、クラス名の変換によってセレクター名を自動的に入力できると便利です。 これを行うには、
selector変数の横にある 式 フィールドをクリックし、リストからlowercaseAndDash関数を選択して、パラメーターとしてComponentNameと入力します。オプション:
selectorの隣に 定義済みはスキップ を選択できます。 この場合、コンポーネント名を編集して Enter を押すと、キャレットは$selector$ではなく$END$の位置に移動します。新しいテンプレートの動作を見てみましょう。