VS Code代码片段：如何动态填充元素数量未知的数组？

针对你这个Pug语法的Emmet代码片段，不用局限于固定数量的数组元素，有几个实用方法：

方法1：修改片段为动态占位符格式 #

把数组部分改成支持按需生成元素的结构，比如：

- const ${1:listItems} = [$*]
ul
  each ${2:item}, i in ${1:listItems} 
    li #{ ${2:item} } 
$0

触发片段后，按Tab键就能自动生成连续的占位符（$3, $4, $5...），继续按Tab可以不断添加新元素，直到数量满足需求。

方法2：用编辑器多光标批量补充 #

如果不想修改原片段，可借助编辑器多光标功能快速扩展：

• 选中数组最后一个元素的末尾位置（比如"$6"后面）
• 按编辑器多光标快捷键（VSCode是Ctrl+Alt+↓，Sublime是Ctrl+Shift+↓），每按一次新增一个光标
• 输入, "$7"（依次递增值），所有光标位置会同步生成新元素，快速拉长数组

方法3：预设可选占位符组 #

把数组改成带可选默认值的结构，方便按需保留或删除元素：

- const ${1:listItems} = ["$3", ${4:"$4"}, ${5:"$5"}, ${6:"$6"}, ${7:"$7"}]
ul
  each ${2:item}, i in ${1:listItems} 
    li #{ ${2:item} } 
$0

触发片段后，不需要的元素直接删除，需要更多就按Tab跳转到下一个占位符补充内容即可。

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