live templates 是 webstorm 中生成重复代码最直接可控的方式，支持多语言、变量、条件逻辑和光标定位；emmet 专用于 html 类文件的快速标签生成；常见失效原因包括触发位置错误、语言识别失败、缩写冲突和作用域限制。
Live Templates 生成重复代码片段
WebStorm 的 Live Templates 是生成重复代码最直接、最可控的方式，不是靠复制粘贴或手敲，而是用缩写 + Tab 触发预设结构。它和 Emmet（用于 HTML/CSS）不同，Live Templates 支持任意语言（JS/TS/Java/Python 等），且可带变量、条件逻辑和光标定位。
- 入口路径：
File → Settings → Editor → Live Templates（macOS 是Preferences） - 必须点击模板右侧的
Define按钮，并勾选对应语言（比如 JS、TypeScript、HTML），否则在该语言文件中完全不生效 - 模板内容里用
$VAR$定义变量，$END$标记最终光标位置；变量默认值要加双引号，如"item"，否则展开后为空 - 示例：新建一个 JS 模板，缩写为
log，内容为console.log('$END$');→ 在 JS 文件中输入log再按Tab，光标直接落在引号内
Emmet 快速生成重复 HTML 标签
如果你要批量生成相同结构的 HTML 元素（比如 5 个 div.item），Emmet 比 Live Templates 更快，且原生支持乘法、嵌套和内容填充。
- 语法格式：
标签名.类名*数量，例如div.box*3→ 展开为 3 个<div class="box"></div> - 带内容：
div.s{hello}*2→ 生成两个含文本hello的div - 嵌套+乘法：
ul>li.item*4→ 生成含 4 个li的ul - 注意：Emmet 只在 HTML / JSX / Vue / Svelte 等模板类文件中激活；在纯 JS 文件里输
div*5不会响应
为什么 Live Templates 没反应？常见失效原因
很多人配完模板却用不了，基本都卡在这几个点上，不是功能坏了，是触发条件没满足。
- 光标不在「可触发位置」：必须在空行或语句末尾（比如分号后、大括号外），不能在字符串、注释、正则字面量内部
- 语言识别错误：右下角状态栏显示的是
Plain Text或Text，而非JavaScript—— 这说明文件没被正确识别为 JS，需检查文件扩展名或右键 →Override File Type - 缩写冲突：已有同名 Emmet 缩写（如
for）会优先匹配 Emmet，此时要么改缩写（如用forr），要么在Settings → Editor → Emmet → HTML中禁用冲突项 - 作用域限制：模板设置了
Applicable in但没勾选当前上下文（比如只勾了JS Statement，却在对象字面量里调用）
避免手动复制粘贴的三个实用场景
真正省时间的模板，是解决你每天高频、固定、易出错的重复劳动。别堆一堆“看起来很酷”但一年用不了一次的模板。
- API 请求封装：缩写
api→ 生成fetch('/api/xxx').then(res => res.json())，把xxx设为变量，$END$放在.then后方便续写 - React useEffect 依赖数组：缩写
ue→useEffect(() => { $END$ }, [$1]);，$1是第一个可编辑变量，自动聚焦 - TypeScript 接口字段声明：缩写
ifield→$FIELD_NAME$: $TYPE$;$END$，定义$FIELD_NAME$默认为id，$TYPE$默认为string
Live Templates 的关键不是数量，而是每个模板是否真的替代了一段你曾反复删改、容易漏掉分号或引号的机械操作。一旦配置好，它就不再需要你决策——输缩写、按 Tab、填变量、回车，一气呵成。其他所有“智能生成”方式，包括 AI Assistant 或 Generate 菜单，都不如这个稳定、低延迟、无网络依赖。
