VS Code 默认支持 Emmet，HTML 文件中输入缩写后按 Tab 即可展开；非 HTML 文件需在设置中配置 emmet.includeLanguages，如 "vue-html": "html"；常用缩写包括 .class、#id、>、+、^ 等，掌握结构逻辑是关键。
VS Code 默认就支持 Emmet，不需要额外安装插件，只要文件后缀是 .html 或语言模式设为 HTML，就能直接用。
输入缩写后按 Tab 键触发展开
Emmet 的核心操作是「写缩写 + Tab」。比如：
-
ul>li*3→ 按Tab展开为一个含 3 个<li></li>的无序列表 -
div.container>h1+p→ 展开为带 class 的div，内部含<h1>和<p> -
img[src="logo.png" alt="Logo"]→ 直接生成带属性的<img>标签
注意：不要用 Enter，必须用 Tab；如果没反应，先检查右下角语言模式是不是 HTML（不是 Plain Text）。
在非 HTML 文件里启用 Emmet（如 .vue 或 .jsx）
VS Code 不会在所有文件类型中默认启用 Emmet，需要手动配置：
立即学习“前端免费学习笔记（深入）”；
- 打开设置（
Ctrl+,或Cmd+,），搜索emmet include languages - 点击「Add Item」，填入：
"vue-html": "html"（用于<template>）"javascriptreact": "html"（用于 JSX 中的 JSX 元素） - 保存后，在
.vue的 template 区域或.jsx文件里就能用div.container这类缩写了
不配的话，即使写了缩写，Tab 也不会展开——这是最常被忽略的卡点。
常用缩写和特殊符号含义
记太多缩写没必要，掌握这几个高频的就够日常开发：
-
.class→<div class="class"></div>（自动补div） -
#id→<div id="id"></div> -
ul>li{Item $}*3→ 生成 3 个<li>Item 1</li>到<li>Item 3</li>，$是计数符 -
a[href="#"]{Click}→<a href="#">Click</a>，花括号包的是文本内容 -
!→ 输入后按Tab，生成完整 HTML5 页面骨架
+ 表示兄弟节点，> 表示子节点，^ 表示上一级——这些符号组合起来才真正提升嵌套效率。
Emmet 不是魔法，它依赖你对 HTML 结构的理解；缩写写错一个符号，展开结果可能完全不对。多练几次 div>ul>li*5 和 section.container>(header+h1)+main+p 这类嵌套，手感就来了。
