Wrap Selection Snippet on Visual Studio Code (vscode)

Question

I want to create an snippet when triggered it will surround the given text. Currently my snippet is:

{ 
  "Function Creator Helper": {
    "prefix": "_w",
    "body": [
      "public function $TM_SELECTED_TEXT () {",
      "  $1",
      "}",
    ],
    "description": "Creates a function given the text selection"
  }
}

This results on:

What I do is:

Select the text.
Write the prefix (_w)
Press Tab

This results on:

public function  () {

}

But I was expecting

public function person () {

}

Any ideas on how can I make this snippet or how can I triggered it correctly?

If I follow yous instructions and the correct answer, and select (highlight) the text to wrap and then type my prefix (rf) it will replace the text, not wrap it. — Eduard
– Eduard, Commented Oct 8, 2018 at 12:02

Mark · Accepted Answer · 2020-08-29 04:16:07Z

26

See https://stackoverflow.com/a/48676522/836330 Your example will work, as of vscode v1.49, as you have it. Vscode snippets have been updated to "remember" your selected text even though you seemingly overwrite it with your snippet prefix.

Older answer:

You can use $TM_SELECTED_TEXT if you trigger it with a hotkey:

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    //  "langId": "csharp",
    "name": "Function Creator Helper"
  }
}

edited Aug 29, 2020 at 4:16

answered Jan 22, 2019 at 10:04

Mark

191k32 gold badges556 silver badges579 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vdegenne Over a year ago

As a side note : when using this method ${TM_SELECTED_TEXT} works too.

Matthew Wilkes · Accepted Answer · 2019-02-05 13:54:21Z

16

The currently selected text is exposed as ${TM_SELECTED_TEXT}, not $TM_SELECTED_TEXT.

edit: As commented below, this is not the case for this particular use-case

edited Feb 5, 2019 at 13:54

answered Apr 3, 2017 at 11:36

Matthew Wilkes

1,0888 silver badges15 bronze badges

2 Comments

Mark Over a year ago

This is not true, both versions work, see code.visualstudio.com/docs/editor/…. If you are doing transforms on those variables then you need to use the ${} form obviously but otherwise either is fine.

Carl Walsh Over a year ago

${TM_SELECTED_TEXT} worked for me in version 1.32.3, but ${selectedText} didn't

Jan De Dobbeleer · Accepted Answer · 2017-02-16 08:29:25Z

4

I was just struggling with this myself. In order to get this to work, the only thing you have to do is press F1, run the Insert Snippet command and then select your snippet from the list.

answered Feb 16, 2017 at 8:29

Jan De Dobbeleer

9046 silver badges12 bronze badges

5 Comments

JohnnyAce Over a year ago

Didn't work, I open the command dialog but I didn't found the command ("_w" or by its name "Function Creator Helper")

Jan De Dobbeleer Over a year ago

Where did you add the snippet? Could it be it's under a different language than the source file you are trying to use it?

Lewy Blue Over a year ago

This works for me. Why doesn't it work when pressing CTRL + space though?

Wasim A. Over a year ago

This is correct answer but unfortunate, this snippet is not that useful though. Textmate said, its most useful !!!

vdegenne Over a year ago

Code 1.41.1 here, Doesn't work. Plus this solution is not very interesting for snippet you want to type fast.

Mitch · Accepted Answer · 2018-11-17 00:56:24Z

2

${TM_SELECTED_TEXT} does not work for me either.

${selectedText} has been added as a Snippet Editor Variable: https://github.com/Microsoft/vscode/pull/39483#issuecomment-383552677

Example:

"JS Block Quote": {
    "prefix": "c2",
    "body": [
        "/* ${selectedText} */",
    ],
    "description": "JS Block Quote"
}

At this time it is not correctly documented: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

NOTE: In a multi-line selection, ${selectedText} is truncated to the first line. An alternative is to use the the clipboard and the ${CLIPBOARD} variable. An extra step :(

edited Nov 17, 2018 at 0:56

answered Nov 17, 2018 at 0:44

Mitch

6651 gold badge10 silver badges14 bronze badges

1 Comment

Mark Over a year ago

code.visualstudio.com/docs/editor/variables-reference : ${selectedText} is a task or launch variable only. It does not work in snippets which have their own variables. It wouldn't make sense to have ${selectedText} and ${TM_SELECTED_TEXT} as both variables for snippets.

brian burnett · Accepted Answer · 2019-01-21 23:01:42Z

2

from Mitches example:

"JS Block Quote": {
    "prefix": "c2",
    "body": [
        "/* $TM_SELECTED_TEXT */",
    ],
    "description": "JS Block Quote" }

from the article: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables the docs must have been ahead of the release.

This works fine in vscode v1.30.2

answered Jan 21, 2019 at 23:01

brian burnett

831 silver badge10 bronze badges

Comments

Stephane Zundel · Accepted Answer · 2020-04-20 14:00:32Z

If somebody wants to know, it works like that for me :

I created two same snippet which only matches when I'm in html or php file (just create two snippets files in your snippets folder "php.json" and "html.json" it works for any languages) and added this code inside :

   "unicommentary": {
        "prefix": "unicommentary",
        "body": "<?php /* ${TM_SELECTED_TEXT} */ ?> ${0}",
        "description": "Creates a universal comment to disable both html and php."
    }

The ${TM_SELECTED_TEXT} tag works when you select some text and trigger your snippet by the Insert Snippet command, you can't just write on selected text.

When you want to use this, select the text you want in your snippet, press Ctrl + Shift + P and select Insert snippet then, type the name of your snippet, press enter and there you go !

Shaik Allabakash · Accepted Answer · 2023-05-04 03:54:47Z

0

Press F1. choose the emmet option. And then use the emmet short cut. For example, to insert your selected text into a span with class decimal, you type span.decimal. That'll do the trick

answered May 4, 2023 at 3:54

Shaik Allabakash

351 silver badge9 bronze badges

1 Comment

Narendranath Reddy Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

Wrap Selection Snippet on Visual Studio Code (vscode)

7 Answers 7

1 Comment

2 Comments

5 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

5 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related