Surround with snippets in VS Code

Who doesn’t like code snippets? They are a quick, reliable, and accessible way to type less code.

“Surround with snippet” are a special type of code snippet that operate on selections. You can use them for many language constructs that typically have some code “inside” them, e.g., if statements, try/catch blocks, and so on. Many of these things are also available as “normal” code snippets, but using Surround with snippets makes it easier to turn already existing code into something else.

Visual Studio Code has them built in, although they don’t have a keybinding by default. You can access them under the Snippets: Surround with Snippet command in the command palette (F1) whenever some code is selected (multiple selections are supported too). Once run, you can then select which snippet you want to use:

Alternatively, set Editor > Snippets > Code Actions: Enabled to true. VS Code will then offer these snippets as code actions (CTRL + . whenever some code is selected).

Surround with snippets are like other snippets in Visual Studio Code: some come built-in, some through extensions, and you can create your own. The concept itself is general—you can find “surround with” snippets in other editors or other extensions under different names.

My favorite variation is actually built into VS Code already: Emmet: Wrap Abbreviation command makes it convenient to restructure HTML code:

---

And that’s it. Happy weekend coding.

—Petr