Overview

If you're using Vim as your text/code editor, you may have heard about Tim Pope. He is one of the best in creating vim plugins out there and there are so many useful plugins that he created, but my first pick is his sourround.vim plugin.

vim-surround plugin

I am a big fan of vim-surround plugin which allows me to easily add surroundings such as parentheses, brackets, quotes, HTML tags, etc. Ever since I switched to Vim from VS Code, this plugin greately improved my productivity on coding in Vim.

Change surroundings with cs

What if you want to change any tag surroundings with any character?

For example, you have <p>Vim Surround</p>. You want to replace p tag with a single qoute:

Delete surroundings with ds

Make surroundings with ys

Note that ys stands for you surround.

You can also wrap the entire line in parentheses or brackets with yss command:

Of course, you can use any characters like "", or '' to wrap the entire line, too:

Wrap around tags or text with a new tag in Visual Mode

So far all the commands that we ran work under the Normal Mode. What if you want to wrap around the multiple lines of html elements? Here is an example:

1<li>1</li>
2<li>2</li>
3<li>3</li>
4<li>4</li>

I would like to surround the four li elements with ul element. With the help of vim-surround:

1. Visually select(i.e., linewise visual mode) the lines of code by pressing a capital V the line(s) of codes and
2. then hit S<ul>. This will make:

1<ul>
2  <li>1</li>
3  <li>2</li>
4  <li>3</li>
5  <li>4</li>
6</ul>

We've been through lots of commands, but they are very intuitive to use when you code. I hope you enjoyed it and please comment below if you have any questions.