WebStorm自定义代码生成分两类：File and Code Templates用于新建文件（如右键New→Vue），Live Templates用于编辑器内缩写+Tab插入代码块（如log→console.log()）；变量语法与作用域互不兼容，混用将静默失败。
WebStorm 的「自定义代码生成模板」分两类，用错地方就永远不生效：File and Code Templates 管新建整个文件（比如右键 New → Vue），Live Templates 管编辑器内打缩写 + Tab 插入代码块（比如输入 log + Tab 插入 console.log()）。必须先明确你要的是哪一种。
怎么让右键 New 里出现自定义文件类型（如 Component Folder）
这是 File and Code Templates → Files 标签页的事，不是 Live Templates。主模板必须用 $name/$name 写路径，否则子模板不会落到同名目录下。
- 进 Settings/Preferences → Editor → File and Code Templates → Files 标签页
- 点 + → 选 Files，名称填
React Component Folder，Extension 留空（或填js），文件名字段必须写$name/$name - 主模板正文可写基础组件结构，例如：
export default function $name() { return <div><h1>$name</h1></div>; } - 选中该主模板，点工具栏 + → 子模板，新建
Test File，Extension 填test.js，文件名填$name.test，正文写测试骨架 - 所有子模板共享
$name变量，但变量值只在新建文件对话框输入文件名时展开——直接粘贴模板不会触发替换
为什么新建文件后 ${NAME} 还是原样没替换
因为 WebStorm 模板变量只在「新建文件对话框中填写文件名」那一刻求值。${NAME} 对应的是你输的文件名（不含扩展名），比如建 Button.vue，${NAME} 就是 Button；但如果跳过对话框、直接新建空文件再贴模板，${NAME} 就真成字面量了。
- 确保你在 New → 你的模板 后弹出的对话框里填了文件名（如
Header），而不是新建完再改名 - 不要把模板内容复制进已有文件——那只是普通文本粘贴，不走模板引擎
- Vue 模板要生效，Extension 必须填
vue（不能带点，不能留空），且必须放在 Files 下，不是 Code 下
怎么创建编辑器内打缩写就展开的代码片段（如 clg → console.log）
这是 Live Templates 的事，在 Settings/Preferences → Editor → Live Templates 里配置，和新建文件无关。
- 进 Editor → Live Templates，选组（如
JavaScript或新建User组） - 点 + → Live Template，Abbreviation 填
clg，Description 写说明，Template text 填：console.log($END$);
- 点 Edit variables，把
END的 Expression 设为none，勾选Skip if defined - 点 Define，设置适用上下文，比如勾选
JavaScript和TypeScript - 输入
clg后按 Tab，光标会停在console.log(|)的括号里
最常被忽略的一点：File Templates 的变量（如 $name）和 Live Templates 的变量（如 $END$）语法不同、作用域隔离——混用会导致模板静默失败，而不是报错提示。
