VSCode Emmet插件高级用法，前端开发必备

VSCode 自带 Emmet 且深度集成，无需额外安装；掌握动态编号（如 $、*）、JSX/Vue 精准补全、自定义缩写、上下文感知展开等高级技巧可大幅提升模板编写效率。

VSCode 自带 Emmet，无需额外安装插件——它早已深度集成在编辑器中，只要文件类型被正确识别（如 .html、.css、.jsx、.vue 等），Emmet 就默认生效。真正提升效率的，不是“会不会用缩写”，而是掌握那些被忽略的高级技巧。

动态生成带序号的元素

写列表、表格行或重复结构时，手动改数字太慢。用 $ 和 * 组合可自增编号：

• div.item$*3 → 生成 <div class="item1"></div> <div class="item2"></div> <div class="item3"></div>
• li{Item $}*5 → 生成 5 个带文字和序号的列表项：<li>Item 1</li>...<li>Item 5</li>
• td{$}+td{col-$}*2 配合 TAB，可快速写出带序号的表格单元格组合

在 JSX / Vue 中精准补全

Emmet 默认支持 JSX 和 <template></template>，但需注意语法差异：

• React 中写 div.my-btn[onClick=handleClick]{Save}，展开后自动转为 <div classname="my-btn" onclick="{handleClick}">Save</div>
• Vue 单文件组件里，直接在 <template></template> 区域输入 el-button@click="submit".is-primary{Submit}，回车即得带事件绑定和插槽文本的完整标签
• 若缩写没响应，检查右下角语言模式是否为 Vue 或 JavaScript React，不是 Plain Text

自定义 Emmet 缩写（snippets）

内置缩写不够用？可以加自己的。打开 VSCode 设置 → 搜索 emmet.variables 或直接编辑 settings.json：

立即学习“前端免费学习笔记（深入）”；

开店星免费开源商城系统

开店星基于Yii2+Vue2.0+uniapp 前沿技术研发，易学易用，前后端分离，多端开发，负载均衡，性能优越架构稳定；商城商品、订单、用户精细化管理；涵盖秒杀、消费奖励、超.级海报等基础营销插件；H5+小程序+公众号，全渠道覆盖，框架成熟稳定便于扩展，高效二开，低成本快速搭建个性化商城。 演示站地址： 账号：admin 密码：admin移动页面展示

0

查看详情

• 添加常用组件缩写："emmet.extensionsPath": "./emmet-snippets"（推荐用 emmet.variables 更轻量）
• 例如添加："emmet.variables": { "cp": "CustomPanel", "api": "axios.get('/api/${1}')${2}" }，之后输入 cp + TAB 就能输出自定义内容
• 对 Vue 项目，可配置 "vue": { "filters": "html, haml" } 来统一模板风格

快捷键与上下文感知展开

别只依赖 TAB —— Emmet 能根据光标位置智能判断：

• 在 CSS 中输入 m10 + Ctrl+E（Windows/Linux）或 Cmd+E（Mac），直接展开为 margin: 10px;
• 在 HTML 标签内输入 lorem10，再按 Ctrl+Shift+P → 输入 “Emmet: Wrap with Abbreviation”，可把选中文本包进 <p>...</p> 或任意结构
• 输入 ul>li*3 后按 Enter（非 TAB），会保留换行和缩进，更适合写多行结构

基本上就这些——不复杂，但容易忽略。把几个高频操作练熟，写模板的速度真能翻倍。

以上就是VSCode Emmet插件高级用法，前端开发必备的详细内容，更多请关注php中文网其它相关文章！