複数のファイルを含むテンプレート
一部のプログラミングパターンとフレームワークでは、通常は非常に特殊な構造の一連の関連ファイルが必要です。例: コンポーネントの場合、多くの場合、一連のファイルが必要になります。1 つはテンプレート用、もう 1 つはロジック用、3 つ目はスタイル用です。
WebStorm では、子テンプレートをファイルテンプレートに追加することにより、関連ファイルのセットを作成できます。このようなテンプレートからファイルを作成すると、子テンプレートからもファイルが作成されます。
複数のファイルでテンプレートを作成する
設定ダイアログ（Ctrl+Alt+S）で、を選択します。
メインファイルテンプレートを作成します。
ファイルタブで、
をクリックして、テンプレートの名前、ファイル拡張子、本文を指定します。リストから新しいテンプレートを選択し、ツールバーの
をクリックします。子テンプレートの名前、ファイル拡張子、本文を指定します。
サンプル: コンポーネントファイルのテンプレート
Header.js、Header.test.js、Header.css などのコンポーネントファイルの束を含む Header フォルダーを作成するとします。
設定ダイアログ（Ctrl+Alt+S）を開き、に移動します。
First, create a template for a JavaScript component file.
ファイルタブで、ツールバーの
をクリックします。新しい名前のないテンプレートがリストに追加されます。右側のペインで、テンプレート名を指定し、コンポーネントフォルダーとし、ファイル拡張子として
jsとします。ファイル名フィールドに
$NAME/$NAMEと入力します。必要に応じて、タイムスタンプなどのコードテンプレートを追加します。
/** * Created by ${USER} on ${DATE} */
関連するテストファイルの子テンプレートを作成します。
親テンプレートコンポーネントフォルダーを選択し、ツールバーの
をクリックします。子テンプレートがコンポーネントフォルダーテンプレートに追加されます。右側のペインで、ファイル名フィールドに
$NAME/$NAMEと入力し、test.js拡張子を指定します。
関連するスタイルシートの子テンプレートを作成します。
親テンプレートコンポーネントフォルダーを選択し、ツールバーの
をクリックします。子テンプレートがコンポーネントフォルダーテンプレートに追加されます。右側のペインで、ファイル名フィールドに
$NAME/$NAMEと入力し、css拡張子を指定します。
OK をクリックしてテンプレートを保存します。
コンポーネントファイルを作成します。
From the context menu of the folder where you want to store the component files, select 。
In the dialog that opens, specify the name that will be used for the folder and for the component files in it (Header in this example).
As a result, a Header folder with three files is created:
関連ページ：
ファイルテンプレート変数
ファイルテンプレートには変数を含めることができます。変数は、テンプレートが適用されるときに値に置き換えられます。変数は、ドル記号で始まり、その後に変数名が続く文字列です。変数名は、オプションで波括弧で囲むことができます。たとえば、とは同じ変数の異なる表記法です。事前定義された変数とカスタム変数は、テンプレート本体とファイル名で使用できます。例: テンプレートのファイル名フィールドにと入力した場合、4 月に作成すると、結果のファイルの名前はになります。ここで、は事前定義された変数です。代わりにカス...
テンプレート内の再利用可能なコンテンツ
テンプレートのインクルードは、ディレクティブによって他のテンプレートに挿入される再利用可能なコード（標準ヘッダー、コピーライトステートメントなど）を定義するために使用されます。ディレクティブの構文は次のとおりです。#parse(