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

…

TOP 10 VsCode Extensions for web developers

Adam Nagy on October 16, 2021

Advantages of extensions Visual Studio Code is widely used nowadays for writing software. It is highly extensible and there are a lot of...

Read full post

Tom Smykowski • Feb 18 '22

Great list. I'd add Assistant to the list: marketplace.visualstudio.com/items...

blackr1234 • Oct 16 '21

Very useful article, thanks for sharing! 🍻

Adam Nagy • Oct 16 '21

You’re welcome. Hope you will or already use dome of these 😉

blackr1234 • Oct 17 '21

I have been using Prettier which is a must-have to me. I have tried Gitlens but I'm still not used to all those buttons/features. For Live Server, I just use the one that comes with React. For Auto Rename Tag, I press F2 (Windows) and type the new tag name, but this extension is a faster way. The other ones are really useful.

Adam Nagy • Oct 17 '21

Yes definetely Prettier is a must have for me either 👍

Gary Lamp • Apr 3 '23

Hi, I've made a productivity extension VS Utils, hope it can save your time.

I'll update the extension every month, like VS Code. Let's try and let me know your opinions.

Gul Zaib • Oct 18 '21

Extremely Cool 😎.
Waiting for the next article ☺️☺️

Adam Nagy • Oct 19 '21

Thanks!
Hope you won't need to wait for so long.
Next blogpost is planned to release today afternoon.

Felix Häberle • Nov 17 '23

i18n folks: The Inlang VS Code extension we are building has been a lifesaver for me in handling i18n complexities. It's effortless to translate, detect missing translations, and update content seamlessly within my VS Code. There is also a typesafe JS library and a CLI for machine translations.

Mehmet Yatkı • Oct 20 '21

Hey @javascriptacademy 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, 🚀🖖

Levan Katsadze • Feb 8 '22

Maybe you will also like the VSCode extension "Blockman". It highlights nested codes blocks based on curly/square/round brackets, html/xml tags and Python/Yaml indentation. (I am the author of Blockman).
.
i.ibb.co/31F0rm9/vscode-blockman-i...
.
.

Christophe Avonture • Oct 19 '21

You're right. That extension is no more useful since months.

demystifying-javascript • Feb 25 '23

Checkout this Javascript Extension Pack for VS Code

https://marketplace.visualstudio.com/items?itemName=demystifying-javascript.javascript-fullstack-developer-extension-pack&ssr=false#review-details

It has the most popular and some of my favorites extensions all in one place

If you want to learn Javascript, follow and subscribe to my channel youtube.com/channel/UCVhh3gpOXCb-r...

imonem • Oct 18 '21

Extremely useful, thanks a lot.

You're welcome!

lijian • Oct 19 '21

Good job,very helpful

Thank you! Enjoy these extensions!

Damian Nowak • Oct 17 '21

That's a really helpful article. I love the Better Comments extension, the way my code shines right now in term of comments and theirs usefulness is brilliant. Thanks for sharing!