Live Templates 的 abbreviation 必须为独立词元、大小写敏感、不与内置缩写冲突，且需正确定义适用语言上下文；$END$ 是唯一光标终点，$VAR$ 变量跳转顺序由 Edit variables 中的 Order 决定，漏写或多写 $END$ 会导致跳转失效。
Live Templates 里 abbreviation 写错就触发不了
WebStorm 的实时模板（Live Templates）靠 abbreviation 触发，不是随便输几个字母就能用。比如你设了 log，那必须在编辑器里**单独输入 log 后按 Tab** 才展开；如果后面紧跟着字母（如 log123），或前面有空格/符号（如 console.log 里的 log），它就不会响应。
-
abbreviation必须是独立词元（word boundary），不能嵌在其他标识符中 - 避免用已有缩写冲突：比如
for、if是内置模板，覆盖前先删掉或改名 - 大小写敏感：设成
Log就只能输Log+ Tab，log不行 - 支持通配符但有限制：
cl*这类写法无效，Live Templates 不解析 glob
template text 中 $END$ 和 $VAR$ 怎么用才不乱序
模板展开后光标默认停在 $END$ 位置，这是唯一且必须的终点标记。如果你漏写或写了多个，WebStorm 会把光标卡在第一个 $END$，后续 tab 跳转失效；多写一个 $END$ 还可能让变量占位符错位。
-
$VAR$类占位符（如$NAME$、$SELECTION$）需配合「Edit variables」按钮配置，默认值和表达式要填对 -
$SELECTION$只在选中文本后触发模板才生效，否则留空；别把它和$END$混用在同一行开头 - 想让光标依次停在多个位置？用
$VAR1$、$VAR2$，再进「Edit variables」设跳转顺序（Order） - 常见坑：
console.log($END$);看似合理，但实际展开后括号没闭合——应写成console.log($END$);并确保$END$在括号内
Vue 或 React 模板加 context 限制才不会全局误触
直接在 Default 模板组里加 vue 相关缩写，比如 comp 展开为组件骨架，结果在 JS 文件里也弹出来——这不是 bug，是你没设作用域。
- 新建模板后，点右下角「Define」，勾选对应语言 context：Vue 组件要同时勾
HTML和Vue.js；React 则选JavaScript或JSX - 不勾任何 context = 全局生效，包括 .txt、.md 文件，极易干扰
- Vue 单文件组件中，
<script>区块属于 JavaScript context，<template>属于 HTML context，别混设 - 测试是否生效：在目标文件类型里输 abbreviation + Tab，没反应就回去检查 context 是否匹配当前 editor 的 language injection
修改完 Live Templates 为什么重启才生效
大多数修改实时生效，但两类变更必须重启 WebStorm：一是模板组（Template Group）重命名或删除，二是模板被移动到不同 group 下。这是因为 WebStorm 在启动时缓存 group 结构，运行时只监听 template 内容变更。
- 日常编辑
template text、abbreviation、Description或变量配置，改完点 Apply 就行 - 如果发现新模板死活不出现，先确认是否误删了所属 group（比如删掉了「React」分组，但模板还在里面）
- Windows/macOS 下配置文件路径分别是
config/templates子目录，手动改 XML 文件后也得重启 - 最隐蔽的坑：改了 group 名但 UI 没刷新，此时新建模板会悄悄落到 Default 组里，看着像“丢了”
Live Templates 真正难的不是写代码片段，而是让它们只在该出现的地方出现、光标停在该停的位置、变量跳转顺序符合直觉——这些细节不调好，反而拖慢编码节奏。
