如何在VS Code自定义Emmet片段中复用同一光标位置的输入内容

原因说明 #

Emmet 自定义片段的占位符语法和 VS Code 原生代码片段语法并不通用，Emmet 本身没有实现同序号占位符内容同步的功能，你重复书写的${1}只会被识别为多个独立光标位，不会自动同步输入内容。

解决方案 #

推荐改用 VS Code 原生的 HTML 用户代码片段实现需求，该语法天然支持同序号占位符内容同步，操作步骤如下：

1. 按下Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，输入「配置用户代码片段」，选择html.json配置文件。
2. 在文件中添加对应片段配置即可，以下是两个适配你需求的示例：

示例1：和你当前测试效果一致的片段

{
  "ID同步测试片段": {
    "prefix": "test",
    "body": "<test id=\"${1:id}\">This is a ${1}.</test>$0",
    "description": "ID内容自动同步的测试片段"
  }
}

示例2：你期望的template+style组合片段

{
  "带样式的模板片段": {
    "prefix": "tplstyle",
    "body": [
      "<template id=\"${1:myId}\">",
      "   This is a ${1}!",
      "</template>",
      "",
      "<style>",
      "   #${1} {${2}}",
      "</style>",
      "$0"
    ],
    "description": "ID自动同步的模板+样式组合片段"
  }
}

配置完成后，输入对应的prefix触发词（比如test）按Tab即可触发片段，输入第一个占位符的内容时所有同序号位置会自动同步填充，按Tab可跳转到下一个占位符位置。

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