Emmet 是 vscode 内置的前端提效功能，支持 html 缩写生成、css 属性补全、快速选择编辑及自定义缩写，开箱即用，大幅提升编码效率。
emmet 是 vscode 里真正能“敲一行，生十行”的前端提效核心功能，不是插件，是内置能力——只要文件类型识别正确（如 .html、.css、.jsx），开箱即用。
HTML 快速生成：从缩写到结构一气呵成
在 HTML 文件中输入 ul>li*5，按 Tab 键，立刻生成带 5 个列表项的无序列表；输入 div.container>h1{Hello}+p{Intro}，回车即得语义化嵌套结构。支持标签、属性（div#app.class1.class2）、文本内容（用大括号包裹）、兄弟/子级关系（+ 和 >）等语法，逻辑清晰，符合直觉。
CSS 属性自动补全：告别拼写与记忆负担
在 CSS 或 style 块中输入 bd1 + Tab → border: 1px solid #000;；m10-20 → margin: 10px 20px;；fw700 → font-weight: 700;。Emmet 内置大量常用简写，大小写不敏感，也支持连字符分隔（如 bgc 和 bg-c 都可触发 background-color）。
快速跳转与编辑：用 Ctrl+Alt+→ / ← 扩展选择范围
写完一段 Emmet 生成的 HTML 后，把光标放在某个标签内，按 Ctrl+Alt+→ 可逐层向外选中父容器（适合批量修改 class 或包裹结构）；Ctrl+Alt+← 则反向收缩。这个操作对重构和微调特别顺手，比手动拖选精准得多。
自定义缩写：让团队或项目专属写法生效
VSCode 支持通过 emmet.extensionsPath 或用户设置中的 emmet.variables 和 emmet.snippets 添加私有缩写。例如在 settings.json 中加入：
立即学习“前端免费学习笔记（深入）”；
“emmet.snippets”: {
“html”: {
“vue-comp”: “div.vue-component>h2{Component Name}+slot”
}
}
之后输入 vue-comp + Tab 就能复用团队约定的 Vue 组件基础结构。
基本上就这些——不用装插件、不用背命令，理解几个符号含义，每天省下几十次重复敲键，长期下来就是开发节奏的明显提升。