Surround

A simple yet powerful extension to add wrapper snippets around your code blocks

Features

Supports language identifiers 🚀New!
Supports multi selections
Fully customizable
Custom wrapper snippets
You can assign shortcuts for each wrapper snippets separately
Nicely formatted (Preserves indentations 🚀New!)
Sorts recently used snippets on top 🚀New!

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 2: Wrapping multi selections

How To Use

After selecting the code block, you can

right click on selected code
OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favorite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands

Command	Snippet
`surround.with` (ctrl+shift+T)	List of all the enabled commands below
`surround.with.if`	if ($condition) { ... }
`surround.with.ifElse`	if ($condition) { ... } else { $else

…

Great VSCode extensions for JS Developers

Insidious on September 21, 2021

Hey everyone, welcome to my first post here on DEV Community! In this post I will be talking about some great VSCode extensions for Java...

Read full post

Patrik • Sep 21 '21

Bracket Pair Colorizer 2 isn't necessary anymore as that functionality is now built into VSCode :) code.visualstudio.com/updates/v1_6...

Insidious • Sep 21 '21

Oh, thanks for mentioning! I don't really read the changelogs so didn't know about it. :)

Raph Zenou • Sep 21 '21 • Edited

Thanks for the article mate. Just wanted to share other extensions:

Rainbow Indent, a great addition to the powerful Bracket Pair colorizer (now built in) / Prettier combo you suggested
GitLens, a superb complement to the source control Tab
JSON explorer well to do what it says on the tin
Microsoft Visual Studio Live Share for pair programming directly in the editor !!

[Edit : added VSCode live share which always blows my mind when I use it but that I forgot]

Insidious • Sep 22 '21

Thanks for mentioning! :-)

Lars Grammel • Sep 21 '21

Great list, I use most of the extensions. I've developed another extension (for refactoring & linting): marketplace.visualstudio.com/items... - would be curious to hear what you think :)

Insidious • Sep 21 '21 • Edited

Thanks. Will use your extension and reply, since I was working on refactoring a project :)

Insidious • Sep 27 '21

Alright, I refactored that random project. Your extension really made it much easier to refactor it. Thanks!

Lars Grammel • Sep 27 '21

Thanks, glad it was useful!

Mehmet Yatkı • Sep 23 '21

Hey @insidiousthedev , thanks for the list.. you can also check this little extension of mine. It gives you CTRL + SHIFT + T shortcut to surround your codeblocks with snippets.

yatki / vscode-surround

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

Command	Snippet
`surround.with` (ctrl+shift+T)	List of all the enabled commands below
`surround.with.if`	if ($condition) { ... }
`surround.with.ifElse`	if ($condition) { ... } else { $else

View on GitHub

Cheers, 🚀🖖

Insidious • Sep 24 '21

That is definitely a great extension you made! Keep up the great work and thanks for mentioning :)

Robert G. Schaffrath • Sep 24 '21

As another reply notes, Bracket Pair Colorizer is now a built in feature of VSCode starting with version 1.60 and is faster (which was the motivation for it be added as an internal feature).

To enable it, you need to either go to "Text Editor" and then check the "Editor>Bracket Pair Colorization" box to enable it or edit your settings.json and set "editor.bracketPairColorization.enabled" to "true".

Thanks for mentioning! :)

BadCat Design • Sep 24 '21

Thanks for the list.
Live Server (last updated April 2019) is an awesome extension! However for simple live refreshing HTML/CSS/JS (not for react, angular etc), we've been using Microsoft's "Live Preview" - still in "Preview" status - but has been super stable here.
marketplace.visualstudio.com/items...