VSCode内置Emmet支持，无需插件即可通过缩写提升HTML/CSS编写效率。输入html:5生成HTML5结构，div.container创建带类名的div，ul>li5生成5个列表项，a[href="#"]{点击这里}创建链接，input[type="text"]+input[type="password"]生成两个输入框，section>h2+p{内容}+button.btn搭建区块；CSS中m10展开为margin:10px，pt5为padding-top:5px，fw为font-weight:bold，posr为position:relative，db为display:block，bgc为background-color:#fff；进阶操作包括使用$生成序列如li.item$3得item1-3，>表示子元素，+表示同级，^上移一层，{}填充文本，适用于Vue/JSX文件，显著提升前端开发效率。
VSCode内置了强大的Emmet支持，能极大提升HTML和CSS的编写效率。你不需要额外安装插件，只要熟悉常用缩写，就能快速生成结构化代码。
HTML中的常用Emmet快捷键
在HTML文件中输入缩写后按Tab或Enter即可展开。
- html:5 → 生成标准HTML5文档结构
- div.container → 创建一个class为container的div
- ul>li*5 → 生成包含5个li的无序列表
- a[href="#"]{点击这里} → 创建带文本和href的链接
- input[type="text"]+input[type="password"] → 连续生成两个输入框
- section>h2+p{内容}+button.btn → 快速搭建区块结构
CSS中的Emmet缩写技巧
在CSS文件里也能用Emmet快速写样式。
- m10 → 展开为 margin: 10px;
- pt5 → padding-top: 5px;
- fw → font-weight: bold;
- posr → position: relative;
- db → display: block;
- bgc → background-color: #fff;
提高效率的进阶操作
结合VSCode特性，可以进一步优化工作流。
- 使用 $ 生成序列号：比如
li.item$*3→ item1, item2, item3 - 嵌套符号：> 子元素，+ 同级，^ 上移一层
- 用 {} 包裹文本直接填充内容
- 在Vue或JSX文件中同样适用，但需注意语境是否支持
