VSCode中能否像HTML的Emmet插件那样批量创建多个CSS类

VSCode 内置的 Emmet 功能本身就覆盖CSS场景的快捷生成，不需要额外安装插件，完全可以实现你需要的连续编号类名批量创建效果。

具体操作步骤 #

• 打开目标CSS文件，将光标放在样式代码的编辑区域
• 直接输入Emmet缩写：.class-$*10
  语法说明：$是Emmet的自增数字占位符，*后面跟的数字代表需要重复生成的片段数量
• 按下Tab键，就能直接生成目标代码：

.class-1 {}
.class-2 {}
.class-3 {}
.class-4 {}
.class-5 {}
.class-6 {}
.class-7 {}
.class-8 {}
.class-9 {}
.class-10 {}

常用扩展技巧 #

你可以根据需求调整语法，实现更灵活的生成效果：

• 自定义数字起始值：比如要生成从.class-3到.class-12的10个类，输入.class-$@3*10即可
• 编号补零对齐：如果要生成两位数格式的编号（如.class-01到.class-10），使用两个$做占位，输入.class-$$*10
• 这套语法同样适用于id选择器、伪类、媒体查询片段等其他CSS结构的批量生成

如果按下Tab没有触发生成，检查两个设置项即可：

1. 打开VSCode设置，搜索Emmet: Trigger Expansion On Tab，确认该选项已勾选
2. 查看编辑器右下角的文件识别模式，确认当前文件被识别为CSS类型，没有被误判为其他文件格式

内容的提问来源于stack exchange，提问作者سعید مزرعه فرهانی