VSCode默认内置Emmet支持，需确保文件语言模式为HTML、后缀正确且设置中emmet.triggerExpansionOnTab为true；缩写对空格和符号位置敏感，自定义需修改settings.json。
Emmet在VSCode里默认就开着，不用装插件
VSCode从1.0版本起就内置了Emmet支持，html、jsx、vue等语言都自动启用。如果你敲div>ul>li*3按Tab没反应，大概率是当前文件没被识别成HTML——检查右下角语言模式是不是HTML，不是的话点一下切换过去。
常见错误现象：div>p{hello}按Tab后只生成空标签，没文本——因为{}里的内容需要紧贴标签名，写成div>p{hello}才对，div > p{hello}中间有空格就会失效。
- 确保文件后缀是
.html或.htm，否则可能触发plaintext模式 - 如果用
.vue单文件组件，在<template></template>里写Emmet才生效，<script></script>里无效 - 禁用
emeraldwalk.runonsave这类插件可能意外覆盖Emmet快捷键
常用缩写怎么写才不翻车
Emmet不是自由发挥的语法糖，它对空格、符号位置很敏感。比如ul>li.item$*3能生成带序号和class的列表，但写成ul > li .item$ *3（加了多余空格）就只出一个空li。
使用场景：写表单、卡片结构、响应式栅格时，用form>(.control-group>label+input)*2比手动敲快得多；但别指望它生成aria-属性或data-属性，这些得手补。
-
$表示序号，$$补零，ul>li.item$*3→<li class="item1"> -
+是同级，>是父子，^往上一层，div>span+p^strong中strong和div同级 -
lorem20生成20字符假文，但lorem后面不能跟{}或[]，否则失效
Tab键没反应？检查这三处设置
VSCode里Emmet默认绑定到Tab，但容易被其他扩展或用户配置覆盖。打开设置搜emmet.triggerExpansionOnTab，确认它是true；再搜editor.tabCompletion，必须是"on"而不是"off"或"onlySnippets"。
性能影响：开启emmet.showExpandedAbbreviation设为"always"会在输入时实时预览展开结果，但对老旧机器可能有轻微卡顿，建议保持默认"inMarkupAndStylesheetFilesOnly"。
- 如果用了
Prettier插件，它的prettier.tabWidth和Emmet缩进无关，Emmet缩进由editor.indentSize控制 - 在
settings.json里手动加"emmet.includeLanguages": {"javascript": "javascriptreact"}才能在.js文件里用Emmet写JSX - Mac用户注意：系统级“输入法”或“辅助功能→键盘→按下修饰键时显示菜单”可能劫持
Tab，关掉再试
自定义缩写要改json，别碰UI设置
想让myheader直接展开成带logo和nav的结构，得编辑emmet.variables或emmet.snippets，UI设置面板里找不到入口。路径是「设置→打开设置(JSON)」，加一段：
"emmet.snippets": {
"html": {
"myheader": "<header class='\"site-header\"'><div class='\"logo\"'></div>
<nav></nav></header>"
}
}
兼容性影响：自定义缩写只在当前工作区或用户级设置生效，团队协作时最好同步.vscode/settings.json，否则别人敲myheader就是普通文本。
- 变量名必须全小写+短横线，
MyHeader或myHeader都不认 - JSON里双引号不能少，
和<code>>要原样写，别转义成 - 别在
emmet.variables里写HTML结构，那是给{}占位符填值用的，比如"lang": "zh-CN"
Emmet真正难的不是记缩写，而是理解它不处理语义、不校验闭合、不关心可访问性——你让它生成table>tr*2>td*3，它不会提醒你缺thead或scope属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
