How to wrap code with the snippet in VS Code

Question

I have this snippet:

"Wrap with React-Fragment": {
    "prefix": "rf",
    "body": [
        "<React.Fragment>${TM_SELECTED_TEXT}</React.Fragment>$1"
    ],
}

I want to have it wrap the highlighted text when I type the prefix. For example, imagine that all these divs are highlighted:

<div></div>
<div></div>
<div></div>

Currently it just replaces the text with the body of the snippet. What should I do to make it work?

Note! I am aware of the solution of pressing F1 and selecting Insert Snippet. It is too cumbersome.

See https://stackoverflow.com/a/48676522/836330. In v1.49 this will work as you expect. Select your `div`'s, type your prefix, and voila. — Mark, Aug 29 '20 at 04:03

score 1 · Answer 1 · answered Nov 15 '18 at 10:45

What about assigning a custom key shortcut ? Open keybindings.json (Preferences: Open Keyboard Shortcuts File), and paste:

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "javascript",
    "name": "Wrap with React-Fragment"
  }
}

How to wrap code with the snippet in VS Code

1 Answers1