Surround

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

Features

Supports multi selections
Fully customizable
Custom wrapper functions
You can assign shortcuts for each wrapper function separately
Nicely formated

Demo 1: Choosing wrapper function 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 favourite 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 }
`surround.with.tryCatch`	try { ... } catch (err) { $catchBlock }
`surround.with.tryFinally`	try { ... } finally { $finalBlock

…

VS Code Extensions to become a more productive Developer 🤓🤓🤓

Benjamin Mock on October 12, 2020

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/ These are some of the VS Code...

Read full post

Moisés Alcocer • Oct 15 '20

Markdown Preview Github Styling to visualize Markdown documents
Auto Rename Tag and htmltagwrap to write HTML / JSX
Code Spell Checker to write in English or other languages...
Git Graph to watch your Git history
...

Mehmet Yatkı • Oct 14 '20

Maybe this one helps someone too :)

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 }
`surround.with.tryCatch`	try { ... } catch (err) { $catchBlock }
`surround.with.tryFinally`	try { ... } finally { $finalBlock

View on GitHub

🚀🖖

Mariano Pardo • Oct 20 '20 • Edited

Thanks for sharing this one. I'm sure I'm going to use the surrounding in <element></element> a lot.

Federico Giacomini • Oct 16 '20

Well I guess after checking this article and installing your new extension, you would find this one SUPER handy. It allow you to save you extension on a github gist, so you can import/export and quickly setup your environment on fresh VSCode installation =>

marketplace.visualstudio.com/items...

Maximilien Pressensé • Oct 18 '20

Settings Sync is now a previewed feature of Vs Code, already available in Vs Code Insiders. It works much better than the extension you're talking about (that I happily removed due to bad UX and bugs).
code.visualstudio.com/docs/editor/...
code.visualstudio.com/insiders/

Benjamin Mock • Oct 18 '20

Nice! Thanks for the hint!

Benjamin Mock • Oct 16 '20

That's indeed super handy. Thanks for the recommendation!

BOX PIPER • Oct 13 '20

That’s awesome!
Polacode is new !

Nicolas Carlo • Oct 16 '20

Oh yeah, Peacock & Prettier are really helpful to me! 🙏

Bracket Pair Colorizer is also the kind of extension you install, then you wonder how life was before!

I'm also the maintainer of an extension that provides automatic refactorings for JS & TS. It's called Abracadabra.

I like how I can extract/inline variables with a single keystroke ⚡

Flux • Oct 13 '20 • Edited

never thought there is an extension like Peacock, thanks for sharing. by the way, you should try Comment anchors. it's an extensions to make a comments as a checkpoint when your code is just too much. Perfect to pair up with better comments.