VSCode 自带 Emmet 且深度集成，无需额外安装；掌握动态编号（如 $、*）、JSX/Vue 精准补全、自定义缩写、上下文感知展开等高级技巧可大幅提升模板编写效率。
VSCode 自带 Emmet，无需额外安装插件——它早已深度集成在编辑器中，只要文件类型被正确识别（如 .html、.css、.jsx、.vue 等），Emmet 就默认生效。真正提升效率的，不是“会不会用缩写”，而是掌握那些被忽略的高级技巧。
动态生成带序号的元素
写列表、表格行或重复结构时，手动改数字太慢。用 $ 和 * 组合可自增编号：
-
div.item$*3→ 生成 -
li{Item $}*5→ 生成 5 个带文字和序号的列表项：- Item 1
...- Item 5
-
td{$}+td{col-$}*2配合TAB，可快速写出带序号的表格单元格组合
在 JSX / Vue 中精准补全
Emmet 默认支持 JSX 和 ，但需注意语法差异：
- React 中写
div.my-btn[onClick=handleClick]{Save}，展开后自动转为Save - Vue 单文件组件里，直接在
区域输入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移动页面展示
- 添加常用组件缩写："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”，可把选中文本包进...
- 输入
ul>li*3后按 Enter（非 TAB），会保留换行和缩进，更适合写多行结构
基本上就这些——不复杂，但容易忽略。把几个高频操作练熟，写模板的速度真能翻倍。
