VSCode默认支持Emmet，但需确保文件语言模式为HTML/CSS、缩写符合选择器语法、在正确位置输入并按Tab展开；CSS缩写须在冒号后触发，且注意嵌套上下文与按键绑定。
VSCode 默认就支持 Emmet，不用装插件、不用改设置，敲完缩写按 Tab 就能展开——但很多人卡在“没反应”或“展开了却不是想要的结构”，问题通常出在语法模式、触发键或缩写写法上。
确认当前文件是 HTML/CSS 模式
Emmet 不是全局生效的，它严格依赖编辑器右下角显示的语言模式（如 HTML 或 CSS）。如果显示的是 Plain Text 或 JavaScript，缩写根本不会触发。
- 点击右下角语言标识（比如写着
Plain Text的地方），选HTML或CSS - 保存文件为
.html或.css后缀，VSCode 通常会自动识别 - 如果用了自定义语言（如
Vue），需确保模板区域被正确识别为HTML；<template>内默认支持，<style>内需是CSS模式
HTML 缩写怎么写才有效
常见失效是因为用了不被识别的语法，或者漏了关键符号。Emmet 的 HTML 缩写本质是“选择器式写法”，不是自由输入。
-
div.container→ 展开为<div class="container"></div> -
ul>li*3→ 展开为一个<ul>包含三个<li> -
img[src="logo.png"][alt="Logo"]→ 展开带两个属性的<img> - 别写
div class="box"：这不是 Emmet 缩写，是普通文本，按Tab不会处理 - 缩写必须写在行首或紧跟在
<后面（如<div.container>），否则可能被当成内容而非标签
CSS 缩写为什么按 Tab 没反应
CSS 模式下 Emmet 主要补全属性名和值，不是生成整条规则。它只在冒号 : 后生效，且依赖你输入的是合法属性前缀。
立即学习“前端免费学习笔记（深入）”；
- 输入
pos:a后按Tab→ 补全为position: absolute; - 输入
m10后按Tab→ 补全为margin: 10px; - 必须先打冒号再输缩写：写成
margin: m10是无效的；正确流程是margin:+ 空格 +m10+Tab - 部分缩写有歧义（如
bg可能对应background或border-bottom），VSCode 会列出候选，用方向键选
Tab 键不工作？检查这几个地方
默认绑定是 Tab，但容易被其他扩展或用户按键映射覆盖。另外，有些场景下 Emmet 会主动禁用。
- 打开命令面板（
Ctrl+Shift+P/Cmd+Shift+P），运行Preferences: Open Keyboard Shortcuts，搜emmet，确认Emmet: Expand Abbreviation绑定的是Tab - 如果在引号内、注释里、或已存在完整标签（如
<div></div>中间），Emmet 不会触发 - 检查是否启用了
"emeraldwalk.runonsave"或"prettier"类格式化插件——它们可能在保存时重排代码，掩盖了 Emmet 效果
真正容易被忽略的点是：Emmet 在不同嵌套层级下行为不同。比如在 <style> 标签里写 CSS 缩写，必须确保光标在 {} 之间且语言模式是 CSS；而写 .btn 时如果光标在 JS 字符串里，它永远只会当普通文本处理。
