WebStorm 2024.3 ヘルプ

複数のファイルを含むテンプレート

一部のプログラミングパターンとフレームワークでは、通常は非常に特殊な構造の一連の関連ファイルが必要です。例: コンポーネントの場合、多くの場合、一連のファイルが必要になります。1 つはテンプレート用、もう 1 つはロジック用、3 つ目はスタイル用です。

WebStorm では、子テンプレートをファイルテンプレートに追加することにより、関連ファイルのセットを作成できます。このようなテンプレートからファイルを作成すると、子テンプレートからもファイルが作成されます。

複数のファイルでテンプレートを作成する

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | ファイルおよびコードテンプレートを選択します。

  2. メインファイルテンプレートを作成します。

    ファイルタブで、the Create Template button をクリックして、テンプレートの名前、ファイル拡張子、本文を指定します。

  3. リストから新しいテンプレートを選択し、ツールバーの The Create Child Template File button をクリックします。子テンプレートの名前、ファイル拡張子、本文を指定します。

サンプル: コンポーネントファイルのテンプレート

Header.jsHeader.test.jsHeader.css などのコンポーネントファイルの束を含む Header フォルダーを作成するとします。

  1. 設定ダイアログ(Ctrl+Alt+S)を開き、エディター | ファイルおよびコードテンプレートに移動します。

  2. まず、JavaScript コンポーネントファイルのテンプレートを作成します。

    1. ファイルタブで、ツールバーの the Create Template button をクリックします。新しい名前のないテンプレートがリストに追加されます。

    2. 右側のペインで、テンプレート名を指定し、コンポーネントフォルダーとし、ファイル拡張子として js とします。

    3. ファイル名フィールドに $NAME/$NAME と入力します。

    4. 必要に応じて、タイムスタンプなどのコードテンプレートを追加します。

      /** * Created by ${USER} on ${DATE} */
    Create parent template
  3. 関連するテストファイルの子テンプレートを作成します。

    1. 親テンプレートコンポーネントフォルダーを選択し、ツールバーの the Create Child Template File をクリックします。子テンプレートがコンポーネントフォルダーテンプレートに追加されます。

    2. 右側のペインで、ファイル名フィールドに $NAME/$NAME と入力し、test.js 拡張子を指定します。

    Create child template: test
  4. 関連するスタイルシートの子テンプレートを作成します。

    1. 親テンプレートコンポーネントフォルダーを選択し、ツールバーの the Create Child Template File をクリックします。子テンプレートがコンポーネントフォルダーテンプレートに追加されます。

    2. 右側のペインで、ファイル名フィールドに $NAME/$NAME と入力し、css 拡張子を指定します。

    Create child template: style
  5. OK をクリックしてテンプレートを保存します。

  6. コンポーネントファイルを作成します。

    コンポーネントファイルを保存するフォルダーのコンテキストメニューから、新規 | コンポーネントフォルダーを選択します。開いたダイアログで、フォルダーとその中のコンポーネントファイル(この例では Header)に使用される名前を指定します。

    Create a component from a multiple files template in a separate folder