VSCode从1.40起内置Emmet支持，html/jsx/vue等语言下输入缩写按Tab/Enter即可展开；需确保文件后缀正确、语言模式为HTML，且在模板上下文（非script/style内）使用。
Emmet缩写在VSCode里默认就生效，不用装插件
VSCode从1.40版本起已内置Emmet支持，html、jsx、vue等语言下直接敲缩写+Tab或Enter就能展开。常见误区是以为要手动启用——其实只要文件后缀是.html或语言模式设为HTML，它就在工作。
容易踩的坑：
• 文件没保存、后缀不是.html，VSCode可能识别成Plain Text，缩写不触发
• 在script标签内或style块里敲缩写，默认不生效（Emmet只作用于模板上下文）
• 按了Tab没反应？检查右下角语言模式是否为HTML，不是就点一下切换
常用缩写怎么写才不翻车
缩写不是自由发挥，得按Emmet语法来，否则生成结果和预期差很远。
-
div.container>ul>li*3→ 生成带class的div，里面嵌套ul，再生成3个li -
img[src="logo.png"][alt="Logo"]→ 属性必须用方括号，引号可省略但含空格/特殊字符时必须加 -
p{Hello World}→ 花括号包文本内容，不是p>Hello World -
section#main.container→ ID和class可以连写，顺序无关，但#必须在前，.在后
常见错误现象：
• 写成div.class#id → 生成的是<div class="class#id">，ID被吞了
• ul>li*5^p中^写错位置 → 想让p和ul同级却缩进到li里
立即学习“前端免费学习笔记（深入）”；
JSX/Vue里用Emmet要注意什么
Emmet在非纯HTML环境会受语言模式影响，行为有差异。
- React/JSX中：
div.my-class生成<div className="my-class"></div>，自动转class→className - Vue单文件组件中：
template区域可用，script或style里无效；div.v-enter会被转成v-enter指令而非class - 如果缩写总生成小写标签（如
my-component变成<my-component>而不是首字母大写），检查是否开了emmet.preferences里的"jsx.enabled": true
性能影响几乎为零，但若在大型Vue文件里频繁触发缩写，偶尔会因语言服务延迟导致卡顿一帧——这不是Emmet问题，是VSCode对.vue文件解析本身较重。
自定义缩写和禁用场景怎么配
真需要改行为，靠配置比找插件靠谱。
- 禁用某语言：在
settings.json里加"emmet.includeLanguages": {"plaintext": "html"}，再把不需要的删掉 - 加自定义缩写：建
~/emmet/snippets.json，写{"cc": "console.log('$1');$2"}，然后在设置里指定路径"emmet.extensionsPath" - 想让
Tab始终触发（哪怕光标不在行尾）：开"emmet.triggerExpansionOnTab": true，但会和部分代码补全冲突，比如输入for后Tab可能先出循环模板而非Emmet
最容易被忽略的一点：Emmet缩写匹配是**前缀匹配**，不是关键词匹配。ul能展开，ul.也能，但ul*不行——星号是乘法操作符，必须跟数字，单独写会被当字符原样输出。
