WebStorm 中按 Ctrl+Alt+T（Win/Linux）或 Cmd+Alt+T（macOS）可快速包裹代码，支持 if、try/catch、React.memo 等默认模板，自定义需配置 Live Template；注意选区干净、快捷键未被劫持、语言上下文正确及缩进统一。
WebStorm 里怎么用 surroundWith 快速包裹代码
直接按 Ctrl+Alt+T（Windows/Linux）或 Cmd+Alt+T（macOS），弹出包裹菜单，选中要插入的模板即可。这个快捷键触发的是 WebStorm 内置的 surroundWith 动作，不是插件也不是配置项，开箱即用。
常见错误是选中代码后没触发菜单——可能因为光标在行首/行尾没真正“选中”，或者多行末尾有空格导致选区不干净；也可能是快捷键被输入法或系统级工具劫持了（比如某些中文输入法会吃掉 Ctrl+Alt+T）。
- 确保用鼠标或
Shift+方向键明确选中整段代码，包括换行符（多行时建议用Shift+↓逐行扩选） - 如果快捷键无效，进
Settings > Keymap搜surround，确认Surround With...绑定是否正常，可右键重置为默认 - 包裹前别留空行或多余缩进，否则生成的代码容易错位（比如
if块多缩进一层）
哪些包裹模板是默认可用的，哪些得自己配
默认支持 if、try/catch、for、while、log（console.log）、return、括号 ()、数组 []、对象 {} 等。JavaScript/TypeScript 文件下还自动带 async/await、Promise 包裹；React 文件里能直接套 React.memo 或 useCallback。
但像 useEffect、lodash.throttle、自定义 Hook 这类，WebStorm 不预置，得手动加 Live Template。
- 加自定义模板：进
Settings > Editor > Live Templates，点+→Template Group新建分组，再在组里加新模板 - 模板内容写成：
useEffect(() => { $SELECTION$ }, [$DEPENDENCIES$])，然后勾选Reformat according to style和Shorten FQ names - 设置
Applicable in为JavaScript或React JSX，避免在 JSON 或 CSS 里误触发
包裹后变量作用域和缩进为什么经常出问题
根本原因是 WebStorm 的包裹逻辑只做文本插入，不主动分析语义。比如对 const x = 1; 用 if 包裹，结果是：if (true) { const x = 1; } —— 这本身合法，但若原作用域里已有 x，就变成重复声明错误。
缩进错乱更常见：选中代码含混合缩进（空格+Tab）、或包裹模板自身没设好缩进规则（比如你写的 Live Template 里用了硬空格而非 $END$ 占位）。
- 包裹前先用
Ctrl+Alt+L（Reformat Code）统一当前文件缩进，尤其检查是否混用 Tab 和空格 - Live Template 编辑时，在模板末尾加
$END$，并勾选Reformat according to style，否则光标卡在错误位置，缩进不会自动对齐 - 对函数体包裹（比如给箭头函数加
async），注意原函数是否有返回值——async () => xxx和async () => { return xxx }行为不同，WebStorm 不帮你补return
Vue/React 文件里包裹 JSX 或模板语法的注意事项
JSX 不是纯 JavaScript，WebStorm 对它的包裹支持有限。比如选中一段 JSX 元素后按 Ctrl+Alt+T，菜单里可能没有 Fragment 或 v-if，只有基础 JS 模板。
Vue SFC 中的 <template> 区域默认不响应 surroundWith，必须先把语言切换为 HTML 或 Vue（右下角状态栏点击语言标识手动切）。
- React 中想包 Fragment，得先建 Live Template：
<>$SELECTION$</>，适用范围设为JavaScript React - Vue 模板里用
v-if包裹，模板内容写：<template v-if="$CONDITION$">$SELECTION$</template>，注意v-if必须配<template>标签，不能直接套在组件上（否则会报错Templates must have exactly one root element） - 包裹后检查是否破坏了响应式依赖——比如把
{{ count }}包进v-if但条件变量未定义，控制台立刻报Cannot read property 'xxx' of undefined
