WebStorm自定义编码模板需分清Live Templates（行内代码插入）和File and Code Templates（新建文件骨架）；设错路径或未点Define指定语言/扩展名，模板将不触发。
WebStorm 里创建自定义编码模板，关键不是“怎么点进去”，而是分清两类模板：Live Templates（用于代码行内快速插入，比如 log → console.log($END$)）和 File and Code Templates（用于新建文件时生成骨架，比如右键 New → Vue）。混用或设错位置，模板根本不会触发。
Live Templates 怎么设才生效
很多人输完 log 按 Tab 没反应，根本原因是没指定语言上下文。
- 路径必须是
Settings / Preferences → Editor → Live Templates（Mac 是Preferences，别进错成File and Code Templates） - 点
+→Live Template，缩写填log（不能含空格、下划线或大写字母） - 模板文本填
console.log($END$);，其中$END$表示光标最终停留位置 - 必须点击
Define，然后勾选JavaScript和/或TypeScript—— 不点这一步，缩写在 .ts 文件里永远不展开 - 动态变量如
METHOD_NAME需进Edit variables配methodName()函数，注意大小写敏感，且只在函数声明作用域内可用
File and Code Templates 怎么让右键 New 出现新选项
想新建文件时右键有 Vue 或 React Component，得走 Files 标签页，不是 Code。
- 路径是
Settings / Preferences → Editor → File and Code Templates → Files - 点
+→ 选Files，名称填Vue，Extension填vue（不含点，不能写.vue） - 模板内容建议加
<!-- @format -->开头，方便 Prettier 自动格式化 - 保存后若右键仍无该选项，重启 WebStorm（2026.1+ 版本存在模板缓存未刷新问题）
- 模板中可用变量如
${NAME}、${DATE}，但${USER}依赖系统环境变量，Windows 下可能为空
Live Templates 从已有代码生成最省事
不用手敲模板文本，直接选中一段代码，让它自动转成模板。
- 在编辑器中选中目标代码（比如一个带注释的函数声明）
- 右键 →
Save as Live Template，或按Ctrl+Alt+J（Windows/Linux）/Cmd+Option+J（Mac） - 缩写填
fn，描述可写 “function with JSDoc” - 点
Define勾选适用语言，再点OK - 之后输
fn+Tab就能插入——变量如${NAME}会自动变成输入框，按Tab切换
最容易被忽略的是：Live Templates 的缩写只在光标位于支持语言的上下文中才触发；File and Code Templates 的扩展名必须严格匹配文件后缀，且不带点。设完不测试、不重启，等于白设。
