Linux Mint系统下VS Code生成指定HTML结构的Emmet快捷键写法咨询

前置确认 #

Linux Mint系统的VS Code默认内置Emmet插件，无需额外安装，先确认以下配置正常：

• 打开VS Code设置（快捷键Ctrl+,），搜索Emmet: Enabled，确认该选项已勾选
• 编辑的文件右下角语言模式标识为HTML，若不是点击切换为HTML即可

对应Emmet缩写及操作 #

你需要的结构可以直接用以下Emmet缩写生成：
(div>span{span=$}+br)*5
操作步骤：

1. 在HTML文件编辑区输入上述缩写
2. 按下默认展开快捷键Tab即可生成目标结构，若Tab未生效可按F1搜索「Emmet: Expand Abbreviation」手动触发
3. 若自定义过Emmet触发快捷键，使用你设置的对应快捷键即可

生成效果验证 #

输入缩写展开后会生成如下完全匹配你需求的代码：

<div><span>span=1</span></div>
<br>
<div><span>span=2</span></div>
<br>
<div><span>span=3</span></div>
<br>
<div><span>span=4</span></div>
<br>
<div><span>span=5</span></div>
<br>

缩写语法说明 #

• ()：将需要重复的一组结构包裹为整体
• div>span：生成父元素div嵌套子元素span
• {}：包裹元素的文本内容
• $：自增占位符，重复时会自动从1开始依次递增
• +：生成同级兄弟元素
• *5：将前面的整体结构重复5次

内容的提问来源于stack exchange，提问作者BM. Zahidul Islam