WebStorm 2025.3 Help

具有多个文件的模板

一些编程模式和框架需要一组相关文件,通常具有非常特定的结构。 例如,对于一个组件,您通常需要一组文件——一个用于模板,另一个用于逻辑,第三个用于样式。

在 WebStorm 中,您可以通过将子模板添加到文件模板来创建相关文件集。 当您从这样的模板创建文件时,还会从子模板创建文件。

创建包含多个文件的模板

  1. 设置 对话框(Ctrl+Alt+S )中,选择 编辑器 | 文件和代码模板

  2. 创建主文件模板。

    请在 文件 选项卡上点击 创建模板按钮 并指定模板的名称、文件扩展名和正文。

  3. 在列表中选择新的模板,然后点击工具栏上的 "创建子模板文件"按钮。 指定子模板的名称、文件扩展名和主体。

示例:组件文件的模板

假设您想创建一个 标题 文件夹,其中包含一组组件文件,例如, Header.js Header.test.js Header.css

  1. 打开 设置 对话框(Ctrl+Alt+S ),然后转到 编辑器 | 文件和代码模板

  2. 首先为 JavaScript 组件文件创建一个模板。

    1. 文件 选项卡中,点击工具栏上的 创建模板按钮。 新增的 未命名 模板已添加到列表中。

    2. 在右侧窗格中,指定模板名称,令其为 组件文件夹 ,并将 js 作为文件扩展名。

    3. 文件名 字段中,输入 $NAME/$NAME

    4. (可选)添加一个代码模板,例如时间戳。

      /** * Created by ${USER} on ${DATE} */
    创建父模板
  3. 为相关测试文件创建一个子模板。

    1. 请选择父模板 组件文件夹 并点击工具栏上的 创建子模板文件。 在 组件文件夹 模板下添加了一个子模板。

    2. 在右侧窗格中,在 文件名 字段中输入 $NAME/$NAME 并指定 test.js 扩展名。

    创建子模板:test
  4. 为相关样式表创建子模板。

    1. 请选择父模板 组件文件夹 并点击工具栏上的 创建子模板文件。 在 组件文件夹 模板下添加了一个子模板。

    2. 在右侧窗格中,在 文件名 字段中输入 $NAME/$NAME 并指定 css 扩展名。

    创建子模板:style
  5. 点击 确定 以保存模板。

  6. 创建组件文件。

    从要存储组件文件的文件夹的上下文菜单中,选择 新建 | 组件文件夹

    在单独的文件夹中从包含多个文件的模板创建组件

    在打开的对话框中,指定将用于文件夹和组件文件的名称(在此示例中为 标题 )。

    在单独的文件夹中从包含多个文件的模板创建组件 — 指定文件夹名称

结果是创建了一个包含三个文件的 标题 文件夹:

已创建组件文件夹
最后修改日期: 2025年 12月 8日