複数のファイルを含むテンプレート
一部のプログラミングパターンとフレームワークでは、通常は非常に特殊な構造の一連の関連ファイルが必要です。例: コンポーネントの場合、多くの場合、一連のファイルが必要になります。1 つはテンプレート用、もう 1 つはロジック用、3 つ目はスタイル用です。
WebStorm では、子テンプレートをファイルテンプレートに追加することにより、関連ファイルのセットを作成できます。このようなテンプレートからファイルを作成すると、子テンプレートからもファイルが作成されます。
複数のファイルでテンプレートを作成する
設定ダイアログ(Ctrl+Alt+S)で、 を選択します。
メインファイルテンプレートを作成します。
ファイルタブで、
をクリックして、テンプレートの名前、ファイル拡張子、本文を指定します。
リストから新しいテンプレートを選択し、ツールバーの
をクリックします。子テンプレートの名前、ファイル拡張子、本文を指定します。
サンプル: コンポーネントファイルのテンプレート
Header.js、Header.test.js、Header.css などのコンポーネントファイルの束を含む Header フォルダーを作成するとします。
設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
まず、JavaScript コンポーネントファイルのテンプレートを作成します。
ファイルタブで、ツールバーの
をクリックします。新しい名前のないテンプレートがリストに追加されます。
右側のペインで、テンプレート名を指定し、コンポーネントフォルダーとし、ファイル拡張子として
js
とします。ファイル名フィールドに
$NAME/$NAME
と入力します。必要に応じて、タイムスタンプなどのコードテンプレートを追加します。
/** * Created by ${USER} on ${DATE} */
関連するテストファイルの子テンプレートを作成します。
親テンプレートコンポーネントフォルダーを選択し、ツールバーの
をクリックします。子テンプレートがコンポーネントフォルダーテンプレートに追加されます。
右側のペインで、ファイル名フィールドに
$NAME/$NAME
と入力し、test.js
拡張子を指定します。
関連するスタイルシートの子テンプレートを作成します。
親テンプレートコンポーネントフォルダーを選択し、ツールバーの
をクリックします。子テンプレートがコンポーネントフォルダーテンプレートに追加されます。
右側のペインで、ファイル名フィールドに
$NAME/$NAME
と入力し、css
拡張子を指定します。
OK をクリックしてテンプレートを保存します。
コンポーネントファイルを作成します。
コンポーネントファイルを保存するフォルダーのコンテキストメニューから、Header)に使用される名前を指定します。
を選択します。開いたダイアログで、フォルダーとその中のコンポーネントファイル(この例では
関連ページ:

ファイルテンプレート変数
ファイルテンプレートには変数を含めることができます。変数は、テンプレートが適用されるときに値に置き換えられます。変数は、ドル記号で始まり、その後に変数名が続く文字列です。変数名は、オプションで波括弧で囲むことができます。たとえば、とは同じ変数の異なる表記法です。事前定義された変数とカスタム変数は、テンプレート本体とファイル名で使用できます。例: テンプレートのファイル名フィールドにと入力した場合、4 月に作成すると、結果のファイルの名前はになります。ここで、は事前定義された変数です。代わりにカス...

テンプレート内の再利用可能なコンテンツ
テンプレートのインクルードは、ディレクティブによって他のテンプレートに挿入される再利用可能なコード(標準ヘッダー、コピーライトステートメントなど)を定義するために使用されます。ディレクティブの構文は次のとおりです。#parse(