如何使用VS Code Surround扩展定义自定义代码片段实现选中内容标签包裹

占位符含义说明 #

• $TM_SELECTED_TEXT：你的推测正确，该变量会自动替换为你触发功能时选中的文本内容。
• $0：是VS Code代码片段语法中定义的最终光标位置，当你完成所有可编辑占位符的输入后，按下Tab键光标会自动跳转至$0所在的位置；如果没有其他可编辑占位符，光标默认落在$0位置。

双光标自定义标签配置方案 #

要实现开闭标签名位置同时出现可同步编辑的光标，直接使用VS Code代码片段的「同序号占位符」规则即可：序号相同的占位符会同步生成光标，输入内容时会同步更新。完整配置如下：

{
  "surround.custom": {
    "surroundWithCustomHtmlTag": {
      "label": "Wrap with custom HTML tag",
      "description": "Wrap selected text with custom HTML tag, edit opening and closing tag synchronously",
      "snippet": "<$1>$TM_SELECTED_TEXT</$1>$0",
      "languageIds": ["html", "javascript", "typescript", "markdown", "javascriptreact", "typescriptreact"]
    }
  }
}

配置效果说明 #

触发该Surround命令后，会自动为选中的文本包裹<></>标签，两个标签名位置会同时出现光标，输入标签名（如img、button）时两侧会同步更新；标签名输入完成后按下Tab，光标会自动跳转至闭合标签的后方，方便继续编辑后续内容。

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