具有多个文件的模板
一些编程模式和框架需要一组相关文件,通常具有非常特定的结构。 例如,对于一个组件,您通常需要一组文件——一个用于模板,另一个用于逻辑,第三个用于样式。
在 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扩展名。

点击 确定 以保存模板。
创建组件文件。
从要存储组件文件的文件夹的上下文菜单中,选择 。

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

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