CODEWITHSUNDEEP
visual-studio-code
JohnnyAce
JohnnyAce

Reputation: 3739

Wrap Selection Snippet on Visual Studio Code (vscode)

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:

Wrapping snippet

What I do is:

  1. Select the text.
  2. Write the prefix (_w)
  3. 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?

Upvotes: 31

Views: 18846

Answers (7)

Shaik Allabakash
Shaik Allabakash

Reputation: 35

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

Upvotes: 0

Mark
Mark

Reputation: 181339

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.

selected text wrap

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"
  }
}

Upvotes: 26

Stephane Zundel
Stephane Zundel

Reputation: 21

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 !

Upvotes: 1

Matthew Wilkes
Matthew Wilkes

Reputation: 1088

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

Upvotes: 16

brian burnett
brian burnett

Reputation: 83

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

Upvotes: 2

Mitch
Mitch

Reputation: 661

${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 :(

Upvotes: 2

Jan De Dobbeleer
Jan De Dobbeleer

Reputation: 855

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.

Upvotes: 4

Related Questions