Emmet在vscode中可大幅提升前端开发效率，通过简写快速生成html和css代码。输入div.container按Tab生成带class的div，ul>li*5生成五个列表项，header>nav>ul>li>a[href=#]构建导航结构，#header生成id为header的div，p{Hello World}创建含文本的段落。CSS中m10展开为margin:10px，mt20→margin-top:20px，bd1#f00→border:1px solid #f00，posr→position:relative，fw900→font-weight:900。确保设置中启用Emmet: Trigger Expansion on Tab以支持Tab展开，jsX文件需配置”emmet.includeLanguages”: {“javascript”: “javascriptreact”}，用Ctrl+Space调出补全建议，Ctrl+E（macOS为Cmd+E）手动触发展开。熟练掌握常用缩写并形成肌肉记忆能显著提升编码速度。

VSCode 中的 Emmet 是前端开发中非常实用的功能，能通过简写快速生成 HTML 或 CSS 代码。掌握常用快捷键和技巧可以大幅提升编码效率。

HTML 中的 Emmet 常用语法与操作

在 HTML 文件中输入 Emmet 简写后，按下 Tab 或 Enter 即可展开。

• div.container → Tab → 生成 <div class=”container”></div>
• ul>li*5 → Tab → 生成包含 5 个列表项的无序列表
• header>nav>ul>li>a[href=#] → Tab → 快速搭建导航结构
• #header → Tab → 生成 <div id=”header”></div>
• p{Hello World} → Tab → 生成带文本内容的段落标签

CSS 中的 Emmet 快捷输入

在 CSS 文件中同样支持 Emmet 缩写，输入后按 Tab 展开属性值。

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现’一键职达’的便捷体验。

79

查看详情

• m10 → Tab → 展开为 margin: 10px;
• mt20 → Tab → 展开为 margin-top: 20px;
• bd1#f00 → Tab → 展开为 border: 1px solid #f00;
• posr → Tab → 展开为 position: relative;
• fw900 → Tab → 展开为 font-weight: 900;

提升效率的 Emmet 设置与技巧

确保 Emmet 在不同语言中正常工作，可检查或设置以下选项。

• 打开设置（Ctrl + ,），搜索 Emmet: Trigger Expansion on Tab，确保启用，这样在输入简写后按 Tab 就能展开
• 若想在 JSX 文件中使用 Emmet，需在设置中添加：“emmet.includeLanguages”: { “javascript“: “javascriptreact” }
• 使用 Ctrl + Space 调出 Emmet 补全建议，适合不确定简写时使用
• 在已有的标签上使用 Ctrl + E（macOS 为 Cmd + E） 可手动触发 Emmet 展开

基本上就这些。熟练使用 Emmet 后，写 HTML 和 CSS 会快很多，关键是多练常用缩写，形成肌肉记忆。