Emmet在VSCode中支持批量生成结构、动态变量插入与属性快速建模：用*和$生成带序号元素，>、+、^控制嵌套与兄弟关系，{}和[]注入文本与属性，还可自定义缩写提升团队协作效率。
emmet在vscode里不只是写div变这么简单——真正提效的，是那些能批量生成结构、动态插入变量、配合属性快速建模的进阶写法。
用*和$批量生成带序号的元素
比如要写5个带编号的列表项：li.item$*5会直接输出：
…
$自动递增，$$补零（如item$$ → item01），$@3表示从3开始（item3、item4…）。
常用组合：
-
div.box$*3→ 3个div class="box1"~"box3" -
td{cell-$}*4→ 带文本内容的4个cell-1 -
img[src="pic$.jpg"]*3→pic1.jpg、pic2.jpg、pic3.jpg
用>、+、^精准控制嵌套与兄弟关系
不用反复敲Tab缩进，Emmet语法本身就能表达HTML层级逻辑：
-
ul>li*3→ -
header+main+footer→ 三个同级块元素 -
section>div>p{hello}+p{world}→p并列在div内 -
div>h2+p^footer→footer与div同级（^跳出一层）
多层嵌套时，^比手动退格快得多，尤其适合写组件模板。
用{}和[]快速注入文本与属性
文本和属性不必等标签生成后再补，一步到位更可靠：
-
a[href="#top"]{回到顶部}→回到顶部 -
button.btn[type="button"]{提交}→ 同时搞定类名、属性、文案 -
input#search.input-text[type="text" placeholder="搜索..."]→ ID、class、type、placeholder一气呵成 - 支持转义：用
\{或\}输出字面大括号
自定义缩写，让团队协作更统一
VSCode支持通过emmet.json或设置里的emmet.variables和emmet.snippets添加私有缩写。例如：
在settings.json中加：
"emmet.snippets": {
"html": {
"ccard": "article.card>h3.title+div.content+p.footer"
}
}
之后输入ccard + Tab，就直接展开为预设的卡片结构。适合封装项目常用组件、表单区块或响应式栅格。
小技巧：用emmet.variables还能定义全局变量，比如"lang": "zh-CN"，然后在缩写中用{lang}调用。
基本上就这些——不复杂但容易忽略，练熟几个高频组合，写模板的速度真能翻倍。
