0

I'm using a VScode extension called "Surround"

In the docs for this extension it shows how to define a custom snippet. What I want is really simple. I would like to add the ability to surround selected text with tags, ie <> </> while placing the cursors in the middle where I define what type of tag that is (html, img, button, etc)

The docs show this example:

    {
  "surround.custom": {
    // command name must be unique
    "yourCommandName": {
      // label must be unique
      "label": "Your Snippet Label",
      "description": "Your Snippet Description",
      "snippet": "burrito { $TM_SELECTED_TEXT }$0", // <-- snippet goes here.
      "languageIds": ["html", "javascript", "typescript", "markdown"]
    },
    // You can add more ...
  }
}

I can almost parse it, except I don't know what the placeholders are representing. I assume { $TM_SELECTED_TEXT } is the text I've selected but what is the trailing $0 used for? Also, how can I place 2 cursors in between the opening and closing tags?

Thanks in advance.

rioV8
  • 24,506
  • 3
  • 32
  • 49
Jo Momma
  • 1,126
  • 15
  • 31
  • Which Surround extension? just use `Emmet: Wrap with Abbreviation`, `$0` is the location of the cursor at the end of the snippet, you should use a field like `$1` and use it multiple times, `<$1> $1>` – rioV8 Nov 01 '21 at 15:26
  • I do use Emmet. This is a scenario where I want to select a block of html and wrap it in a div after the fact. I'm using the extension with the literal name "Surround" for vscode – Jo Momma Nov 01 '21 at 16:09
  • 1
    `Emmet: Wrap with Abbreviation` is exactly doing what you want, there are 2 extensions with the name `Surround` – rioV8 Nov 01 '21 at 16:36
  • https://github.com/yatki/vscode-surround – Jo Momma Nov 01 '21 at 16:44
  • I checked out Emmet: Wrap with Abbreviation. You're right.....that works. Thanks. I guess I like the Surround extension because I can just right click and pull up the surround extension rather than needing the additional step of opening up the command palette. – Jo Momma Nov 01 '21 at 16:48
  • you can create a keybinding for this emmet command, you can even define the tag to wrap with so a simple key press and bob is your uncle – rioV8 Nov 01 '21 at 17:42

0 Answers0