Visual Studio Code Surround With

I can't find any way to surround a selection with something in VS Code.

For example doing something like that : text => "text" just by selecting the word text and typing key "

Another example with the following text :

mon
tue
wed
thu
fri
sat
sun```

By selecting all of theses words :

mon| tue| wed| thu| fri| sat| sun|```

and typing " I would like to perform something like this :

"mon"
"tue"
"wed"
"thu"
"fri"
"sat"
"sun"```

If someone have any idea.

Thanks.

Selecting some text and pressing " already works in VSCode to surround a single item, and works for multi-line selections as well.

NOTE: this is language dependent. The language syntax must define opening and closing braces, e.g. quotes, braces, etc. So this will not work in a "plaintext" file, for example. Change your language mode with CTRL+SHIFT+P and type Change Language Mode ENTER and select something like JavaScript where this is supported.

What you are after though is not really that efficient like that. Your best bet is to use multi-cursors.

Place the cursor at the start of the first line, press CTRL+ALT+DOWN to add another cursor below on the next line. Keep doing that until you have a cursor in front of all your words.

Then just type " then END then " and all your lines are surrounded by quotes.

NB: To check if you have a key bound, and what it is, you can always press CTRL+SHIFT+P and type Add Cursor Below and if there's a keybinding it will show to the right of that text.

In VS Code hold Command + Shift + P then write: "> Preferences: Open Keyboard Shortcuts (JSON)"

In this area that you are allowed to modify, paste this inside the brackets:

{
    "key": "ctrl+p",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "\"${TM_SELECTED_TEXT}\""
    }
}

** note that in this example the key is set to Ctrl + p, you can change the key to whatever you prefer

Maybe you can try this extension, you can write your own custom wrappers:

https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround

> A simple yet powerful extension to add wrapper templates around your code blocks.

Features

• Supports multi selections
• Fully customizable
• Custom wrapper functions
• You can assign shortcuts for each wrapper function separately
• Nicely formated

Demo 1: Choosing wrapper function from quick pick menu

Demo 2: Wrapping multi selections

Using Yuri Aps' suggestion, I added the following JSON to keybindings.json. This provides the functionality Ronan Lamour requested for any file type, and without requiring an extension. It works for either single or multiple selections when using either single or double quotes. Coming from Sublime, this is helpful since it reproduces functionality Sublime provides natively.

{
    "key": "'",
    "command": "editor.action.insertSnippet",
    "when": "editorHasSelection",
    "args": {
        "snippet": "'${TM_SELECTED_TEXT}'"
    }
},
{
    "key": "shift+'",
    "command": "editor.action.insertSnippet",
    "when": "editorHasSelection",
    "args": {
        "snippet": "\"${TM_SELECTED_TEXT}\""
    }
},

I was coming from (neo)vim switching to VS Code, and was using Tim Pope's wonderful "vim-surround" plugin for vim before. I found a port of that plugin for VS Code. It's very useful, and incredibly efficient once you learn the shortcuts, in my opinion!

Links:

• Original plugin by Tim Pope for vim
• Port of plugin to VS Code

If you use vim or vim bindings in VS Code, please enjoy!

Edit: the VSCodeVim plugin includes the surround functionality automatically, so if you have that plugin installed, you don't really need the vscode-surround plugin.

This extension also exists if you want custom surround with text.

https://marketplace.visualstudio.com/items?itemName=sifue.surrounding.

I just installed it and got it working perfectly

Update 15-02-2022:

VS Code has introduced Surround with snippets for JS/TS natively.

It may not be totally related with the question but it may help someone who landed in this question with the intent of "surround with" in vs code.

A more generic solution: in keybindings.json:

{
  "key": "alt+m",     
  "command": "editor.action.insertSnippet",
  "when": "editorHasSelection",
  "args": {
      "snippet": "$1${TM_SELECTED_TEXT}$1$0"
  }
}

Whatever you type after triggering the keybinding will be added to both ends of all selections.

Just tab to the end of the word(s) when you are done and, if you had multiple cursors Esc to remove extra cursors leaving just one.

Select the word you want to surround it with and enter Ctrl + Alt + T. Then just key in whatever key you want to surround it with.