VSCode如何编写类似Emmet的多级嵌套数组快速生成代码片段？

实现方案（共两种） #

方案一：内置代码片段实现（无需额外插件） #

适合常用固定数量嵌套数组的场景，配置后输入对应触发词即可直接生成：

1. 按Ctrl+Shift+P（Mac系统按Cmd+Shift+P）调出命令面板，搜索「配置用户代码片段」，选择你需要生效的语言（如JavaScript、TypeScript，也可以新建全局代码片段文件实现全语言生效）。
2. 在打开的JSON配置文件中，加入以下自定义规则：

{
  // 触发词a*3：生成包含3个一维子数组的嵌套数组
  "嵌套数组(3个元素)": {
    "prefix": "a*3",
    "body": [
      "const ${1:array} = [",
      "  [${2:1}],",
      "  [${3:2}],",
      "  [${4:3}]",
      "]"
    ],
    "description": "快速生成3个元素的一维嵌套数组"
  },
  // 触发词a*4：生成包含4个一维子数组的嵌套数组
  "嵌套数组(4个元素)": {
    "prefix": "a*4",
    "body": [
      "const ${1:array} = [",
      "  [${2:1}],",
      "  [${3:2}],",
      "  [${4:3}],",
      "  [${5:4}]",
      "]"
    ],
    "description": "快速生成4个元素的一维嵌套数组"
  },
  // 触发词a>a*3：生成两层嵌套数组，内层包含3个元素
  "两层嵌套数组": {
    "prefix": "a>a*3",
    "body": [
      "const ${1:array} = [",
      "  [",
      "    [${2:1}],",
      "    [${3:2}],",
      "    [${4:3}]",
      "  ]",
      "]"
    ],
    "description": "快速生成两层嵌套数组"
  }
}

3. 保存配置后即可使用：在编辑器中输入对应触发词（如a*3），按Tab即可生成对应结构，多次按Tab可以依次修改数组名、子元素的内容。
   如果需要其他数量的结构，按照上述格式新增对应规则即可。

方案二：自定义Emmet缩写实现（支持动态数量） #

如果需要任意数量的动态生成，和HTML Emmet体验完全一致，可以修改Emmet自定义配置：

1. 打开VSCode设置，搜索emmet.extensionsPath，设置一个本地空文件夹作为Emmet配置的存放路径。
2. 在上述文件夹中新建名为snippets.json的文件，写入以下配置：

{
  "javascript": {
    "abbreviations": {
      "a": "const array = [${[${*}]}]"
    }
  }
}

3. 重启VSCode后即可使用：输入a*N（N为你需要的子数组数量，比如a*6）即可生成对应数量的嵌套数组，输入a>a*3即可生成两层嵌套结构，和你使用HTML Emmet的操作逻辑完全一致。
   如果是其他语言，修改上述配置里的数组语法为对应语言的格式即可。

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