Emmet缩写不响应，首要确认语言模式是否为HTML/CSS/Vue等支持类型且光标位于标签内或样式区域；其次检查emmet.triggerExpansionOnTab是否启用，或改用Ctrl+E强制展开。
Emmet缩写不响应？先确认语言模式和光标位置
Emmet 不是“按了就一定生效”，它依赖两个关键条件：当前文件的语言模式（如 html、css、vue、javascriptreact）和光标是否在标签内或样式声明区域。常见失效场景包括：文件被识别为 Plain Text（右下角显示“Plain Text”）、光标停在 JS 字符串里、或在注释中输入缩写。
解决办法：
- 点击右下角语言模式名称，手动选择对应类型（如
HTML或VUE） - 确保光标位于标签开始处（如
<div>的<后）或 CSS 属性值前（如margin:后） - 若在 JSX 中失效，检查
settings.json是否配置了"emmet.includeLanguages": { "javascript": "javascriptreact" }
Tab 键 vs Ctrl+E：不同场景选对展开方式
Tab 是默认展开键，但不是万能的；Ctrl+E（Windows/Linux）或 Cmd+E（Mac）才是更精准的“强制展开”操作，尤其适合光标不在缩写末尾时使用。
典型用例：
- 在 CSS 文件中写完
m10，光标卡在中间——直接按Ctrl+E，不用挪到末尾再按Tab - HTML 中输入
lorem20后想生成占位文本，Tab有时会跳到下一个字段，Ctrl+E更可靠 - 在 Vue 的
<template>区域写el-button，Tab可能触发 VSCode 自动补全而非 Emmet，此时Ctrl+E能绕过干扰
重构 HTML 结构时，“Wrap with Abbreviation”比手敲快十倍
当你有一段现有内容（比如几行文字、一段 JSON 数据、甚至剪贴板里的纯文本），想快速套进 div.wrapper>p 或 ul>li* 这类结构里，别删重写——用 Emmet: Wrap with Abbreviation 命令。
实操步骤：
- 选中目标文本（支持多行、跨标签）
- 按
Ctrl+Shift+P→ 输入Emmet: Wrap with Abbreviation→ 回车 - 输入缩写，例如
section>h2+p+ul>li*，回车即完成包裹 - 注意：缩写中
*表示重复次数，{text}可填充内容，^可上提层级
这个命令对页面重构特别实用，比如把一堆 Markdown 段落转成带 class 的 article 结构，或把 API 返回的数组项批量转成 li 列表。
Vue/JSX 中属性和事件不能硬套 HTML 写法
Emmet 在框架模板里会自动转换语法，但前提是缩写写法符合约定。直接写 div onclick="handleClick" 在 JSX 中会出错，因为 React 要求 onClick 和大括号。
正确写法：
- React 中写
div[onClick=handleClick]{Button}→ 展开为<div onClick={handleClick}>Button</div> - Vue 中写
button@click="submit".primary{Save}→ 展开为<button @click="submit" class="primary">Save</button> - 避免在 JSX 中用
class，改用.btn缩写，VSCode 会自动转为className="btn" - 指令缩写如
v-if、v-model必须带v-前缀，否则不会识别
最易忽略的一点：Vue 单文件组件中，Emmet 只在 <template> 区域生效，<script> 或 <style> 里无效——这不是 bug，是设计使然。
