Using TM_SELECTED_TEXT in my custom snippets

Question

With the November 2016 (version 1.8) release of VSCode Snippet Variables are now supported, specifically TM_SELECTED_TEXT.

This makes me happy as I have used these heavily in both Sublime Text and TextMate.

I can't figure out how to get it to work in VSCode. I've created the snippet they use as an example:

"in quotes": {
    "prefix": "inq",
    "body": "'${TM_SELECTED_TEXT:${1:type_here}}'"
}

I then enter some text, highlight it and that's where things start to break.

The idea is highlight some text, run the snippet and then ${TM_SELECTED_TEXT:${1:type_here}} is replaced with the highlighted text. The problem I'm having is that to run the snippet you need to type the prefix value (in this case inq) to run the snippet which over-writes your highlighted text which messes everything up.

In Sublime/Textmate I launched the snippet from a keyboard combination which left my text highlighted.

Is there a way, in VSCode, to either make this work as is or launch the snippet from a key combination like was available in Sublime?

Overgrow

Answer 1

With the word highlighted, press F1 and run the command "Insert Snippet", then select your snippet on the list.

Also you can edit your keybindings by going to File>Preferences>Keyboard Shortcuts and add some shortcut to the "editor.action.showSnippets" command, like this:

{
    "key": "ctrl+alt+s",
    "command": "editor.action.showSnippets",
    "when": "editorTextFocus"
}

Atal

Answer 2

Coming in 1.49 (it is in the Insiders' Build as of this edit) your example will finally work as you expected. See merged pull request.

Vscode will now "remember" your selected text if any, and when you type your snippet prefix, insert it into the TM_SELECTED_TEXT variable even though you seemingly over-typed that selected text.

---

As of v1.20 this has become easier as a new variable $CLIPBOARD has been added, see new snippet variables. So there is no need to assign and run a shortcut - but you must copy the selection to clipboard CTRL-C.

Your example could now be:

"in quotes": {
    "prefix": "inq",
    "body": "'$CLIPBOARD:${1:type_here}'"
}

Note: $CLIPBOARD works. There's no need for the extra curly brackets {$CLIPBOARD}.

Pigment

Brilliant, I'd give multiple upvotes if possible. Tested on v1.51.1. Didn't work < v1.49 – Ginzburg

Answer 3

https://github.com/Microsoft/vscode/issues/17780

as per this thread you can assign exact snippet to keybinding by providing args. keybinding example for bootstrap media queries

{
    "key": "ctrl+alt+b",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "name": "bsup"
    }
},
{
    "key": "ctrl+alt+shift+b",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "name": "bsup_copy"
    }
},

snippet example

"bsup": {
    "prefix": "bsup",
    "body": [
        "@include media-breakpoint-up(md){",
        "\t${TM_SELECTED_TEXT}",
        "}"
    ],
    "description": "Bootstrap media up"
},
"bsup_copy": {
    "prefix": "bsup_copy",
    "body": [
        "${1:${TM_SELECTED_TEXT}}",
        "@include media-breakpoint-up(md){",
        "\t${2:${TM_SELECTED_TEXT}}",
        "}"
    ],
    "description": "Bootstrap media up + copy selected text"
},

UPD: moreover - you can define snippet directly in keybindings.json which seems to be even more convenient for me in some cases

{
  "key": "cmd+shift+c",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
     "snippet": "console.log('${TM_SELECTED_TEXT}', $TM_SELECTED_TEXT$1);"
  }
}

Dovetailed

Answer 4

using documentation from https://code.visualstudio.com/docs/editor/userdefinedsnippets i was able to customize snippets, i am using 'surround with' extension and can put my own snippet into settings.json as follows:

"html_h3-name": {
  "label": "h3",
  "description": "wrap by h3 with <a name=''>, top",
  "snippet": "<h3><a name=\"${TM_SELECTED_TEXT/[\\s]/-/g}\"></a>$TM_SELECTED_TEXT\n\t<a class=\"small\" href=\"#top\">top</a>\n</h3>"

},

which takes highlighted code in VSCode and creates h3 header from it with a name link:

it converts  'aaa bbb ccc' to 
<h3><a name="aaa-bbb-ccc"></a>aaa bbb ccc
    <a class="small" href="#top">top</a>
</h3> 

Phidippides