根本原因是webstorm未将模板注册到对应语言类型下，需手动挂载至javascript等节点，并确保extension填js；.env等非标准类型须先注册文件类型再挂模板；目录结构需用directory主模板+子模板实现；变量统一用${name}格式。
新建文件模板时没出现在右键菜单里
根本原因不是模板没写好，而是 WebStorm 没把它“注册”到对应语言类型下。它不会自动把一个 js 模板塞进 JavaScript 新建菜单——必须手动挂载到 JavaScript 节点下。
检查步骤：
- 打开
Settings → Editor → File and Code Templates → Files - 确认你的模板建在
Files标签页，而非Includes或Code - 左侧树状列表中，找到
JavaScript（或TypeScript、CSS等），把模板拖进去 - 确保
Extension字段填的是js，不是.js或留空
如果扩展名是 jsx 或 tsx，还要去 Settings → Languages & Frameworks → JavaScript 确认对应语法支持已启用。
想新增一个 .env 或 .gitignore 这类非标准类型
WebStorm 默认不识别 .env 为独立文件类型，所以光建模板没用——它压根不触发新建逻辑。得先注册文件类型，再挂模板。
操作路径：
- 进入
Settings → Editor → File Types - 点击右上角
+ Add，Name 填Environment File，Description 可选填 - 在
Registered Patterns区域点+ Add，输入*.env - 回到
File and Code Templates → Files，新建模板，Name 填Env File，Extension 填env，正文写NODE_ENV=development - 把该模板拖到刚创建的
Environment File节点下（不是Text或Files）
注意：Extension 字段只写后缀名，不带点；Registered Patterns 才要带 * 和 .，比如 *.gitignore。
为什么新建时文件名里不能输路径，比如 src/components/Button
WebStorm 的文件模板不负责创建目录结构——它只生成单个文件。如果你在新建对话框里输入 src/components/Button，它会尝试创建一个叫 src/components/Button.js 的**单文件**，而不是目录 + 文件。
真要生成目录结构（如 Button/Button.js），必须用「主模板 + 子模板」机制：
- 主模板类型选
Directory，File name字段填${NAME}/${NAME} - Extension 留空或填
js（仅用于识别，不影响生成） - 再为其添加子模板，比如
Test File，Extension 填test.js，File name填${NAME}.test - 这样新建时输入
Header，就会生成Header/Header.js和Header/Header.test.js
别试图在普通文件模板里写 src/${NAME}/${NAME}.js——它只会生成一个名字含斜杠的怪文件，不会建目录。
变量写成 $NAME 还是 ${NAME}？
两者都识别，但行为不同：$NAME 是旧式简写，${NAME} 是 Velocity 标准语法。遇到嵌套或条件逻辑（比如 ${NAME?cap_first}）时，$NAME 会直接失效。
推荐统一用 ${NAME}，尤其以下场景：
- 模板正文里有类似
export default ${NAME}的写法，避免和 JS 变量名冲突 - 需要配合 WebStorm 内置函数，如
${NAME?lower_case}或${DATE?date("yyyy-MM-dd")} - 未来可能加条件判断（虽然少用，但
${NAME?has_content?then("foo", "bar")}只支持大括号语法）
另外，${USER}、${DATE}、${TIME} 是 WebStorm 预定义变量，无需额外声明；自定义变量（如 ${COMPONENT_NAME}）需在模板正文中显式出现才会弹出输入框。
