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