PHPStorm 中快速包裹前端代码的正确方法是使用 Live Templates：新建模板组，定义缩写（如 vueif），模板内容为 v-if="$SELECTION$"，限定作用域后选中代码输入缩写+Tab即可完成包裹。
PHPStorm 里怎么用 Live Templates 快速包裹前端代码
直接说结论：别找“包裹”按钮，PHPStorm 没这个独立功能；真正高效的方式是用 Live Templates（实时模板），配合选中代码 + 缩写触发，1 秒完成包裹，比如把 div 包进 v-if、把 JS 表达式包进 {{ }}、给 CSS 类加 BEM 前缀等。
常见错误是去菜单里翻“Code → Surround With”，那个只内置了有限几项（如 if、try-catch），对 HTML/JSX/Vue 模板基本没用，还容易按错成 Ctrl+Alt+T 弹出一堆不相关的重构选项。
- 打开
Settings → Editor → Live Templates - 点右侧
+→Template Group新建组（比如叫Frontend），再在组内点+→Live Template -
Abbreviation填缩写，比如vueif；Description写“Wrap with v-if”；勾选Reformat according to style和Shorten FQ names -
Template text填：v-if="$SELECTION$"
，然后点Define限定作用域为HTML或Vue.js - 选中要包裹的代码（比如
<div>content</div>），输入vueif+Tab，自动变成<div v-if="...">content</div>
怎么让包裹操作支持光标定位和多处编辑
默认模板把整个选中内容当黑盒处理，但实际需要更灵活：比如包裹后光标停在 v-if 的双引号里，或者同时编辑多个占位符（如 class 和 @click）。
关键在 $SELECTION$ 和 $END$ 的组合，以及变量函数：
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“PHP免费学习笔记（深入）”；
- 想让光标停在属性值里：
<div v-if="$SELECTION$" $END$>$SELECTION$</div>
—— 注意这里用了两次$SELECTION$，第一次作为属性值，第二次作为标签内容（适用于纯文本包裹） - 想支持动态插入多个可编辑位置：用
$VAR$定义变量，再在Edit variables里设expression为clipboardContent()，这样粘贴的内容会自动填入 - 对 Vue 的
slot包裹，模板写成：<template #"$END$">$SELECTION$</template>
，触发后光标直接落在#后面，输完名字按Tab跳到内容区
为什么 Surround With（Ctrl+Alt+T）对前端代码经常失效
因为 Ctrl+Alt+T 的行为严重依赖当前文件类型和光标上下文。在 .vue 文件的 <template></template> 区域，它可能只列出 v-for、v-if 等 Vue 指令；但在 .js 文件里，它根本不会显示任何 HTML 相关选项——它不是“通用包裹”，而是“语言感知重构”。
- 在 JSX 中按
Ctrl+Alt+T，大概率弹出的是Extract Method而不是Wrap in div - 即使你手动添加了自定义
Surround模板，它也只在“当前语言支持的上下文”生效，比如在 CSS 文件里加的 HTML 包裹模板完全不会出现 - 真正稳定的方案还是回到
Live Templates，自己控制作用域（HTML、JavaScript、Vue.js、Vue SFC Template等）
Vue / React 场景下容易忽略的包裹细节
前端框架有自己的语法规则，硬套通用 HTML 模板会出问题。比如 Vue 的 v-for 必须配 key，React 的列表渲染必须带 key 属性，这些不能靠模板自动补全，得提前设计好。
- Vue 的
v-for包裹模板建议写成：v-for="$ITEM$ in $LIST$" :key="$ITEM$.id"
，并在Edit variables中给$ITEM$设默认值item，$LIST$设为list - React 的 JSX 包裹慎用
div：如果只是逻辑分组，应该用$SELECTION$>（Fragment），否则可能破坏样式或语义 - CSS-in-JS 或 Tailwind 场景下，包裹常伴随 class 处理，可建一个
tw模板：className="$SELECTION$ $END$"
，方便后续补 Tailwind 类名
最麻烦的其实是嵌套包裹：比如先包 v-if，再包 v-for，再包 slot。这时候别反复触发模板，直接用 Live Templates 的变量跳转（Tab 键顺序切换）一次配齐，否则容易漏掉 key 或错位闭合标签。
