Surrounding Things With Vim Surround

VSCodeVim comes with a bunch of useful Vim plugins built-in. One of them is vim-surround which is enabled by default and extends Vim’s secret language with a new operator: surround or s.

Using the surround operator we can operate on the surroundings (quotes, parenthesis, braces, tags, etc…) of swaths of text much in the same way to how we use other operators within Vim.

The surround operator itself can be seen as three separate operators:

• ds to delete the surroundings
• cs to change the surroundings
• ys to add surroundings

And so, like any operator in Vim you would use them like this:

ds{count}{motion}
cs{count}{motion}
ys{count}{motion}

For example:

• ds' to delete the surrounding ' (ds{char})
• cs'" to change the surrounding ' for " (cs{old}{new})
• ysaptli> to surround a paragraph with an <li> tag (ys{motion}{char})

Remember that you can always use the . command to repeat the last change? Want to surround several pieces of text with a <li> element? You can type ysaptli> the first time and then . the subsequent ones.

You can also use vim-surround by selecting a bit of text in visual mode and then using S{desired character}. This will surround your text selection with the desired character.

Try it out! It’ll save you a ton of time.