VS Code中如何用Emmet生成li内嵌button的列表结构？

直接用这条Emmet语法即可生成你需要的结构：

ul#list-items>li.items{Items $}>button.delete-btn{$}*4

语法说明： #

• ul#list-items：生成带id="list-items"的<ul>容器
• >：指定后续元素为当前元素的直接子节点
• li.items{Items $}：生成带class="items"的<li>标签，内部文本为Items $，其中$会自动生成从1开始的递增序号
• >：指定<button>是<li>的直接子元素（也可以用空格替代>，效果一致）
• button.delete-btn{$}：生成带class="delete-btn"的<button>标签，内部文本为与<li>对应的递增序号
• *4：将整个<li>及其子元素的结构重复生成4次

执行后生成的HTML结构如下：

<ul id="list-items">
  <li class="items">Items 1<button class="delete-btn">1</button></li>
  <li class="items">Items 2<button class="delete-btn">2</button></li>
  <li class="items">Items 3<button class="delete-btn">3</button></li>
  <li class="items">Items 4<button class="delete-btn">4</button></li>
</ul>

如果需要让文本Items X和按钮之间有空格，只需在Emmet的文本部分添加空格即可：

ul#list-items>li.items{Items $ }>button.delete-btn{$}*4

内容的提问来源于stack exchange，提问作者William C