Live Template缩写不触发，首要检查作用域是否勾选JavaScript/TypeScript及是否存在缩写冲突；其次确认光标处于代码上下文而非字符串或注释中，避免使用v等常见前缀，建议改用vdirective等唯一缩写。
Live Template 缩写不触发？检查作用域和冲突
在 WebStorm 中按 Tab 无法展开自定义指令模板，大概率是模板没生效。常见原因有三个：缩写被内置模板占用（比如 vif 和 Vue 的 v-if 冲突）、模板未勾选 JavaScript 或 TypeScript 作用域、或当前光标落在字符串/注释里——Live Template 只在代码上下文中响应。
解决办法很直接：
- 进
Settings > Editor > Live Templates，找到你的模板，点开Define，确保勾选了JavaScript和/或TypeScript（Vue 项目通常要两个都勾） - 缩写避免用常见前缀，比如不用
v开头，改用vdirective或custdir - 输入缩写后不要等，立刻按
Tab；如果弹出灰色补全列表，说明当前上下文不匹配，把光标移到export default {块内再试
Vue 指令模板怎么写才真正可用
一个能直接复用的自定义指令模板，不能只写个空壳。它得包含 bind、update、unbind 三阶段钩子，还得支持传参和修饰符。否则生成后还要手动补全，反而拖慢节奏。
推荐这样定义模板内容（适用于 Vue 2 / Vue 3 Options API）：
export default {
bind(el, binding, vnode) {
// ${DESCRIPTION}
console.log('binding:', binding.value, binding.arg, binding.modifiers)
},
update(el, binding, vnode) {
// ${DESCRIPTION}
},
unbind(el, binding, vnode) {
// cleanup
}
}
其中 ${DESCRIPTION} 是可编辑变量，输入缩写后按 Tab 会高亮提示你填写，填完回车自动跳到下一个位置。别漏掉 el 参数——这是指令作用的 DOM 元素，所有操作都基于它。
Vue 3 Composition API 下怎么生成指令
Vue 3 的 Directive 类型是函数式声明，返回对象而非生命周期钩子。如果你项目用的是 setup() 或 defineComponent，Live Template 必须适配新语法，否则生成的代码会报类型错误。
关键点有三个：
- 模板中必须用
const ${NAME} = (el, binding) => { ... }形式，不能沿用 Vue 2 的对象写法 - 需要显式导入类型：
import type { Directive } from 'vue'—— Live Template 本身不自动加 import，得手动写进模板里，或提前在文件顶部加好 - 如果指令要访问组件实例（比如调用
emit），得靠binding.instance，但该属性在 SSR 下为undefined，模板里最好加个判断注释提醒
生成后报错 “Cannot find name ‘binding’”？类型没对齐
这问题多出现在 TypeScript 项目里。Live Template 生成的是纯 JS 结构，但 TS 文件要求明确类型标注，否则 binding 会被视为 any，后续取 binding.value 就可能报错。
两种处理方式：
- 在模板里直接写类型：
bind(el: HTMLElement, binding: DirectiveBinding)，前提是项目已全局声明或导入了DirectiveBinding - 更稳妥的做法：模板末尾加一行注释
// @ts-ignore: binding type inferred，留待后续统一补类型，避免阻断编码流 - 别依赖 WebStorm 自动推导——它不会给
binding补全value、arg、modifiers字段，这些得靠你手敲或复制文档字段名
复杂指令往往要配合 onMounted 或 watch 做副作用，这类逻辑没法靠模板一键生成，得留出注释占位，比如 // TODO: add watch for binding.value——这才是真实工作流里最常被忽略的一环。
