Using TM_SELECTED_TEXT in my custom snippets

Question

In November 2016 (version 1.8), the VSCode Snippet Variables version , in particular TM_SELECTED_TEXT, is now supported .

This makes me happy as I used them in Sublime Text and TextMate.

I cannot figure out how to make it work in VSCode. I created a snippet that they use as an example:

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

Then I enter some text, select it and that where something starts to break.

The idea selects some text, starts the fragment, and then ${TM_SELECTED_TEXT:${1:type_here}}is replaced by the selected text. The problem I ran into is that to run the fragment, you need to enter a value prefix(inq in this case) to run the fragment that overwrites the selected text that messed everything up.

In Sublime / Textmate, I ran a snippet from a key combination that left my text selected.

Is there a way, in VSCode, to either make this work as is, or to run a fragment from a key combination, as was available in Sublime?

Answer 1

With the word highlighted, click F1and run the Insert Fragment command, then select your fragment in the list.

, "" > "" > " " "editor.action.showSnippets", :

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

Answer 2

v1.20 $CLIPBOARD, . . , CTRL - C.

:

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

: , ${CLIPBOARD}. .

Answer 3

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

, args.

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

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

Answer 4

using the documentation from https://code.visualstudio.com/docs/editor/userdefinedsnippets, I was able to configure the fragments, I use the extension 'surround with' and I can put my own fragment in settings.json as follows:

<pre class="cmd">"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 the selected code in VSCode and creates an h3 header from it with a link to the name:

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