webstorm live templates需手动创建并绑定作用域才生效：进入settings → editor → live templates，新建template group及live template，必填abbreviation（如ue）、template text（含$end$等变量）、勾选reformat according to style；触发前须在define中明确勾选当前文件类型（如vue.js、typescript），否则tab无响应。
WebStorm 的代码片段（Live Templates）不是装完就用的功能，必须手动创建、绑定语言作用域、并确认触发方式，否则输完缩写按 Tab 一定没反应。
Live Template 创建路径和关键字段填什么
入口固定：打开 Settings → Editor → Live Templates，点 + → Template Group（比如起名 React Hooks），再在该分组下点 + → Live Template。
必须填的三项：
-
Abbreviation：缩写，全小写、短而唯一，比如ue（别用useEffect） -
Template text：模板正文，支持$SELECTION$（选中内容插入点）、$END$（光标最终位置）、$DEPENDENCIES$（可手动补依赖项） -
Reformat according to style：务必勾选，否则生成后缩进错乱，尤其 JSX/TS 中明显
为什么输完缩写按 Tab 没反应
最常见原因不是配置错了，而是作用域没开对。模板右下角显示的 Applicable in: … 必须包含你当前编辑的文件类型。
- 在
.tsx文件里写log不生效？→ 点Define，必须勾选TypeScript（JavaScript不继承） - 在 Vue 单文件组件的
<script setup></script>里想用ue？→ 得同时勾选Vue.js和TypeScript - React JSX 语法（如
useEffect(() => {}, [])）需单独勾选React JSX，React TypeScript是另一个独立作用域 - 没勾
Expand with Tab（默认不勾）→ 按Tab永远不会展开
变量怎么写才不报错、不卡死
Live Template 的变量底层用极简 Groovy 引擎，不支持 import、不支持外部类、甚至部分 Java 方法都不可用。
- 安全写法只用内置对象：
editor（获取光标位置）、file（获取文件名）、project（项目信息），以及基础字符串方法如fileNameWithoutExtension() - 想自动补函数名？变量表达式写
methodName()，不是method()或name() -
$MODULE_REF$、$FUNCTIONNAME$这类预置变量可用，但不能组合调用（如$FUNCTIONNAME$.toString()会失败） - 所有变量必须用
$xxx$包裹，且不能嵌套（$${xxx}$无效）
真正容易被忽略的是作用域叠加逻辑——WebStorm 不做“类型推导继承”，JS 模板不会自动跑到 TS 文件里，React JSX 模板也不会覆盖 React TS，每个上下文都得手动打钩。哪怕只是多勾一个 Vue.js，就能让同一个缩写在 SFC 里正常工作。
