webstorm文件模板需手动绑定至语言节点且扩展名严格匹配才能显示在右键菜单中；主模板类型为directory并配合子模板可实现多文件结构生成；变量须用${...}语法且仅files模板支持；修改后需重启ide刷新缓存。
WebStorm 的文件模板不会自动出现在右键菜单里，必须手动绑定到对应语言节点、扩展名严格匹配，否则新建时根本看不到你的模板。
模板建在 Files 页签但没出现在 New 菜单里
这是最常见失效场景：你建好了模板，名字也写了，但右键 → New 里只有「File」和「Directory」，没有你的「Vue」或「React Component Folder」。
- 检查模板是否放在
Files页签下（不是Includes或Code） - 确认
File extension字段填的是vue（不是.vue），js（不是.js），test.js（子模板用） - 模板必须拖拽到左侧语言分类节点下——比如想新建 JS 文件，就得把模板拖到
JavaScript节点里，不能只留在Files总目录下 - 如果用了
.tsx或.jsx，先去Settings → Languages & Frameworks → JavaScript确认已启用对应语法支持
想一次生成组件+测试+样式文件夹结构
WebStorm 不支持“建个目录模板然后往里塞一堆文件”，它靠主模板 + 子模板联动实现多文件生成，关键在路径写法和变量共享。
- 主模板类型选
Directory，File name必须写成$NAME/$NAME（注意是斜杠，不是反斜杠；大小写统一用$NAME，别混用$name） - 主模板
Extension留空或填js，正文可写基础组件代码，如export default function $NAME() { return <div>$NAME</div>; } - 选中该主模板，点右侧
+→Subtemplate，新增子模板：File name填$NAME.test，Extension填test.js，正文用vitest或@testing-library/react结构 - 再加一个 CSS 子模板：
File name填$NAME，Extension填css，正文留空或写:root {}
变量不替换、日期/作者显示为字面量
模板里写了 ${USER} 和 ${DATE}，但新建后文件里直接显示 `${USER}` 字符串，说明变量语法错了或者模板类型不对。
- 所有变量必须用
${...}（美元+花括号），不是$...或#{...} - 仅
Files类型模板支持${USER}、${DATE}、${NAME}这类预定义变量；Includes或Code模板不识别它们 -
${NAME}是用户在新建对话框里输入的文件名，不含扩展名；如果你输Button，它就替换成Button，不是Button.js - 需要输出字面量
$字符时，用${DS}，比如const price = ${DS}19.99;
最容易被忽略的是：WebStorm 2026.1 版本存在模板缓存未刷新问题，改完模板后右键菜单仍不出现，必须重启 IDE 才生效。
