如何在VS Code中批量生成含Faker伪数据的代码片段？

方案1：自定义VS Code代码片段（最省心） #

直接在VS Code里做个自定义代码片段，结合你现在用的Faker插件变量，就能实现批量生成：

1. 按Ctrl+Shift+P调出命令面板，输入「用户代码片段」，选你常用的语言（比如html.json）打开片段文件
2. 粘贴下面的配置：

"批量生成App卡片": {
  "prefix": "SomeApp",
  "body": [
    "${1:3}",
    "${1/repeat(\\d+)/${0:/repeat} <div class=\"app-card\">\n  <h3>${faker.app.name}</h3>\n  <p>作者：${faker.app.author}</p>\n</div>/g}"
  ],
  "description": "输入数量批量生成带伪数据的App卡片"
}

3. 用的时候输入SomeApp按Tab，输入你要的数量（比如3）再按Tab，立刻就能出对应数量的div结构。

原理就是靠VS Code代码片段的正则替换+repeat功能，把你输入的数字转成对应次数的卡片，同时调用插件的${faker.app.name}和${faker.app.author}生成伪数据，完全兼容你现在用的插件。

方案2：多光标+现有插件快速凑数 #

不想写片段的话，用多光标也能快速搞定：

• 先弄好一组带伪数据的div
• 选中这组代码，按Ctrl+Shift+D复制N次（或者按住Alt+Shift拖鼠标创建多光标）
• 把光标移到每个需要换数据的位置，重新触发插件的Faker指令生成新数据就行

方案3：自己写个极简扩展（进阶需求） #

如果一定要用SomeApp*3这种带*的触发格式，那就自己写个超简单的VS Code扩展：

• 监听编辑器的输入，解析*后面的数字作为生成次数
• 调用Faker.js的API生成对应数量的伪数据，拼接成div结构插入到编辑器里
• 这个扩展逻辑很简单，核心就是解析指令格式+循环生成模板

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