Using TM_SELECTED_TEXT in my custom snippets

后端 未结 4 1186
醉话见心
醉话见心 2021-01-04 19:06

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 h

相关标签:
4条回答
  • 2021-01-04 19:34

    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);"
      }
    }
    
    0 讨论(0)
  • 2021-01-04 19:35

    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> 
    
    0 讨论(0)
  • 2021-01-04 19:39

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

    0 讨论(0)
  • 2021-01-04 19:49

    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"
    }
    
    0 讨论(0)
提交回复
热议问题