答案：VSCode内置Emmet支持，输入缩写如!、ul>li*3等按Tab即可生成HTML结构，CSS中m10、fw等可快速补全属性，提升编码效率。

VSCode 内置了 Emmet 支持，能让你用简写快速生成 HTML 和 CSS 代码。只要输入缩写，按 Tab 或 Enter 就能展开成完整结构，提升编码效率。

启用与触发 Emmet 模板

Emmet 在 VSCode 中默认开启，无需额外配置。在 .html 或 .css 文件中直接输入 Emmet 缩写即可使用。

• 输入 ! 后按 Tab，生成完整的 HTML5 文档结构
• 输入 ul>li*3 展开为带三个列表项的无序列表
• 输入 .container#main 生成带有 class 和 id 的 div 元素

常用 HTML 缩写示例

掌握几个高频缩写能大幅加快 HTML 编写速度。

• div.test →
• p{Hello} →

  Hello

• ul>li.item$*3 → 三个 class 为 item1、item2、item3 的列表项
• input[type="text"] → 带属性的 input 标签

CSS 中的 Emmet 快捷方式

在 CSS 文件里，Emmet 可快速补全属性值。

• m10 → margin: 10px;
• fw → font-weight: bold;
• bd1-s#f00 → border: 1px solid #f00;
• posa → position: absolute;

基本上就这些。多练几次常见缩写，写前端代码会快很多。VSCode 的 Emmet 实时模板不复杂但容易忽略细节，关键是动手试一试。