webstorm的live templates需手动创建并绑定作用域才能生效；以ue→useeffect为例：settings → editor → live templates → 新建分组 → 添加模板，设abbreviation为ue、template text含$selection$和$dependencies$、define勾选javascript/react jsx，并启用reformat。
WebStorm 的代码片段（Live Templates）不是“开关一开就生效”的功能，而是需要手动创建、绑定作用域、并注意触发时机的轻量级自动化工具。默认带的 for、if、log 等只是冰山一角，真正好用的模板得自己配，且必须避开几个关键陷阱。
怎么添加一个能自动展开的自定义代码片段
比如想输入 ue 后按 Tab 就生成 useEffect(() => { }, [])，不能只写内容，得走完整流程：
- 打开
Settings→Editor→Live Templates - 点
+→Template Group，起名如React Hooks（分组便于管理） - 在该分组下再点
+→Live Template，填入：
Abbreviation:ue
Template text:useEffect(() => { $SELECTION$ }, [$DEPENDENCIES$]) - 点
Define，勾选JavaScript和React JSX（不勾HTML或CSS，否则在错误上下文里也会触发） - 务必勾选
Reformat according to style，否则生成后缩进错乱
为什么输完缩写按 Tab 没反应
常见静默失败，不是模板没建好，而是上下文或光标位置不对：
- 光标必须在**可编辑的代码行内**，不能在注释、字符串、JSON 值、CSS 规则体里——Live Template 严格按语言注入点判断
- 缩写后必须按
Tab，不是Enter或空格；部分模板（如带$END$的）还要求光标不在行首 - 如果当前文件类型没被
Define到（比如你在.ts里用了只定义在JavaScript的模板），它根本不会出现 - 检查是否被其他插件劫持了
Tab行为（如某些 Markdown 插件会拦截）：临时禁用插件验证
怎么让代码片段自动补全依赖数组
像 useEffect、useMemo 这类需要推导依赖的模板，WebStorm 本身不自动分析变量，但可以靠 $DEPENDENCIES$ 占位符 + 手动快捷键联动：
- 模板中写
[$DEPENDENCIES$]，展开后光标会停在这里 - 此时按
Ctrl+Shift+Space（智能补全），WebStorm 会列出当前作用域内所有可访问的变量名 - 选中变量后按
Tab或Enter插入，多个变量用逗号隔开即可 - 别指望它全自动填满——依赖推导是 ESLint / TypeScript 的事，Live Template 只负责结构和占位
Live Template 和 Surround With 有什么区别
两者都省手，但触发逻辑、适用阶段和扩展性完全不同：
-
Surround With（Ctrl+Alt+T）是**对已存在代码块的操作**，比如选中一行fetch(...)再套try/catch，它不关心语法，只做包裹 -
Live Template是**从零开始生成新代码结构**，依赖缩写 +Tab，适合高频固定模式（如组件声明、Hook 调用） -
Surround With模板不可自定义 UI，但支持语言上下文自动过滤（JS 文件里不会显示public class）；Live Template可自由写任意文本，但作用域要手动指定 - 容易混淆的是：React 文件里
Ctrl+Alt+T有React.memo选项，但它和 Live Template 里的memo缩写是两套系统，互不干扰
最常被忽略的一点：Live Template 的 $SELECTION$ 占位符在多行选中时行为不稳定——有时吞掉换行，有时缩进错位。真要包裹大段代码，优先用 Ctrl+Alt+T；只有小段、高频、结构固定的代码，才值得配成 Live Template。
