live templates是webstorm唯一正统的自定义缩写路径，必须通过settings→editor→live templates创建并define作用域（如html/js）才能生效；不可在file and code templates中配置，且缩写需全局唯一、光标须处于正确语言上下文。
Live Templates 是 WebStorm 唯一正统的自定义编码缩写路径
WebStorm 不支持像 VS Code 那样直接编辑 snippets.json 或通过 Emmet 配置文件添加缩写。所有你想要的「输完缩写按 Tab 就展开」行为，必须走 Live Templates —— 这是 JetBrains IDE 的统一机制，和 Emmet 无关，也和 File and Code Templates 完全不搭界。
常见错误：在 Settings → Editor → File and Code Templates 里改东西，结果敲 log + Tab 没反应。那地方只管新建文件时的骨架，不参与行内实时展开。
- 正确入口永远是：
Settings → Editor → Live Templates（macOS 是WebStorm → Preferences → Editor → Live Templates） - 新建模板前，先点右侧
+→Template Group建个分组（比如叫React或HTML Snippets），避免以后全堆在user下难管理 - 缩写（Abbreviation）必须全局唯一；不能同时存在两个
card，哪怕一个在 HTML、一个在 JSX 里
缩写没反应？先检查这三件事
输完缩写按 Tab 没展开，90% 是配置漏项或上下文错位，不是插件没装、也不是版本太低（2020.3+ 全原生支持）。
-
Define按钮没点：填完缩写和模板文本后，必须手动点Define→ 勾选适用语言（如HTML、JavaScript、TypeScript）。漏勾等于没生效 - 当前文件类型没识别对：右下角状态栏看是不是显示
HTML或JS。如果是Plain Text，右键文件 →Override File Type→ 选对应类型 - 光标位置不对：在 JS 字符串里写
div.card+ Tab，Emmet 和 Live Template 都不会触发——Live Template 只在支持的语言上下文中生效，不在字符串、注释或 CSS 值内部
模板文本里 $END$ 和 $SELECTION$ 别乱换
这两个占位符语义固定，换错了会让模板反人类。
-
$END$：Tab 展开后光标最终停的位置。比如log模板写成console.log($END$);，按 Tab 后光标就在括号里，可直接输内容 -
$SELECTION$：仅当你事先选中了一段代码，再输缩写 + Tab，才会把这段代码塞进模板对应位置。例如包裹选中代码的try/catch模板必须用$SELECTION$，不能写成$END$ - 动态变量如
$DATE$、$METHOD_NAME$要进Edit variables配置，且得勾Skip if defined，否则每次展开都弹窗让你填
Emmet 缩写和 Live Templates 别混着用
WebStorm 里 ul>li*3 这类 Emmet 是开箱即用的，但它是独立系统；你自定义的 card 或 ue 是 Live Templates，两者共存但互不干扰。
- 别试图用 Live Templates 去覆盖
div、ul等基础 Emmet 标签名——会破坏嵌套（比如div>ul可能卡住） -
html:5是 Emmet 特殊缩写，只在空文件或光标在首行开头时生成完整骨架；其他情况只出，这不是 bug，是设计逻辑 - 想让
card在 .vue 文件的<template></template>里生效？勾HTML和Vue.js；但在<script></script>块里生效？只勾JavaScript或TypeScript，别勾Vue.js
