VSCode的Emmet快捷键你知道多少？

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快速写样式。

万知

万知: 你的个人AI工作站

38

查看详情

• 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文件中同样适用，但需注意语境是否支持

以上就是VSCode的Emmet快捷键你知道多少？的详细内容，更多请关注php中文网其它相关文章！