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：
立即学习“前端免费学习笔记（深入）”；
- 添加常用组件缩写："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），会保留换行和缩进，更适合写多行结构
基本上就这些——不复杂，但容易忽略。把几个高频操作练熟，写模板的速度真能翻倍。
