91

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"
1

10 Answers 10

79

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.

5
  • 2
    as far as I can see this works only to enquote something - the answer below is more like Visual Studio ctrl-k-s that allows selections to be surrounded with say, a try-catch block - don't know anything about the extension below but seems well rated in VS Code extension library
    – Serexx
    Jun 21, 2018 at 3:22
  • 6
    NOTE: This will not work if you use an extension such as Vim mode which changes key bindings behavior, until you disable the extension and restart VS Code.
    – Mike Lyons
    Feb 5, 2019 at 12:40
  • 2
    For Mac users, the key binding is Command + Option + Down
    – thenolin
    Jul 22, 2021 at 13:56
  • I modified the try/catch for python: "snippet": "try: \n\t$TM_SELECTED_TEXT\nexcept Exception as e: \n\tprint(f'error here: {e}')$1\n$0"
    – grantr
    Sep 20, 2022 at 19:56
  • Didn't work for json. Language-dependent solutions are obviously somewhat limited as solutions. This is a great example of something trivially easy to automate in emacs.
    – AdamC
    Oct 6 at 19:51
65

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

5
  • 4
    This is the cleanest solution without having to install any additional plugins.
    – xji
    Dec 17, 2018 at 15:53
  • 1
    This doesn't work. It surrounds the text with a double quote. Can't see how you can specify a tag or any other kind of text.
    – ATL_DEV
    Sep 13, 2019 at 14:42
  • 1
    This is the real response to the question. Should be the first in the list. By the way @ATL_DEV: if you want to wrap it with a different thing than double-quites (the question was about this specifically), then simply change the double-quotes in the snippet with a different thing.
    – jalarcon
    Feb 18, 2020 at 9:44
  • 11
    This is great. Also, just change it to "snippet": "${1}${TM_SELECTED_TEXT}${1}" to be able to insert any arbitrary character.
    – Aurelio
    Apr 4, 2020 at 21:17
  • @Aurelio How do you pass the variable to Oct 6 at 21:32
34

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 1

Demo 2: Wrapping multi selections

Demo 2

2
  • Helped me to surround my 2k of rows with single quotes. Few notes that worth mentioning: 1. Use multiple selection to select data 2. Create custom snippet according to docs: "singleQuotes": { "label": "single quotes", "description": "Single Quotes", "snippet": "'$TM_SELECTED_TEXT'" }, 3. Use custom snippet to wrapp your text Jul 1, 2020 at 11:05
  • if you are looking for double quotes here is the code { "surround.custom": { "doubleQuotes": { "label": "double Quotes", "description": "doubleQuotes", "snippet": "\"${TM_SELECTED_TEXT}\"" } } }
    – kumar
    Sep 17, 2020 at 16:38
19

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}\""
    }
},
3
  • This is the best answer in my opinion. Thanks Kirk!
    – Gowiem
    May 16, 2020 at 16:06
  • ` || editorHasMultipleSelections` does not add anything to the when clause and can be removed. editorHasSelection is true when there are multiple selections.
    – Mark
    Jan 22, 2022 at 22:45
  • Mark, I got your suggested edits but I don't have enough reputation to review them. =( Jan 29, 2022 at 4:58
6

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:

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.

2
  • VSCodeVim's surround ability is just as good as vim-surround in nvim
    – Reorx
    May 9, 2022 at 7:42
  • @Reorx yep, it's already in my edit since 2018. :-) May 10, 2022 at 8:38
5

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.

5
  • Does not work with ad hoc snippets.
    – majkinetor
    Mar 25, 2022 at 12:52
  • 2
    @majkinetor yes it does "add quote": { "prefix": "q", "body": ["\"$TM_SELECTED_TEXT$0\"", ], "description": "Quote" }
    – MotKohn
    Apr 28, 2022 at 20:36
  • Does that work in general or just for JS/TS @MotKohn ?
    – majkinetor
    Apr 29, 2022 at 21:04
  • Of interest, with VSCode 1.70 (July 2022): github.com/microsoft/vscode/issues/150678
    – VonC
    Jul 22, 2022 at 14:03
  • it is not a new snippet feature, they just changed the JS/TS snippets to use the ${TM_SELECTED_TEXT} variable as all the other answers here use
    – rioV8
    Feb 8 at 14:18
4

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

2

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.

surround demo

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.

1

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.

1
  • 2
    Works for me but without the Ctrl + Alt + T command, just select and press either ", (, [, { , etc
    – Xavi
    Jan 13, 2022 at 19:57
0

Since GitHub supports math in Markdown now, I need to wrap my formulas with dollar signs:

$E = mc^2$

When I select a formula and press dollar sign $ on my keyboard I get my formula wrapped automatically. Here is one way to achieve it:

  1. Open Keyboard Shortcuts menu:
  1. Press on Open Keyboards Shortcuts (JSON) button:
  1. In shortucts.json file, which opens, paste this snippet:
{
    "key": "shift+4",
    "command": "editor.action.insertSnippet",
    "when": "editorHasSelection",
    "args": {
        "snippet": "$${TM_SELECTED_TEXT}$"
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.