Surround

Mehmet Yatkı

|
28,345 installs
| (16) | Free
A simple yet powerful extension to add wrapper templates around your code blocks.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Surround

Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License


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 1

Demo 2: Wrapping multi selections

Demo 2

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 }
surround.with.tryCatchFinally try { ... } catch (err) {$catchBlock} finally { $finalBlock }
surround.with.for for ($1) { ... }
surround.with.fori for (let i = 0; ... ; i = i + 1) { ... }
surround.with.forEach items.forEach((item) => { ... })
surround.with.forEachAsync items.forEach(async (item) => { ... })
surround.with.forEachFn items.forEach(function (item) { ... })
surround.with.forEachAsyncFn items.forEach(async function (item) { ... })
surround.with.arrowFunction const $name = ($params) => { ... }
surround.with.asyncArrowFunction const $name = async ($params) => { ... }
surround.with.functionDeclaration function $name ($params) { ... }
surround.with.asyncFunctionDeclaration async function $name ($params) { ... }
surround.with.functionExpression const $name = function ($params) { ... }
surround.with.asyncFunctionExpression const $name = async function ($params) { ... }
surround.with.element <element>...</element>
surround.with.comment /** ... */
surround.with.region #region $regionName ... #endregion

Configuration

Each wrapper function config object is defined as ISurroundItem like below:

interface ISurroundItem {
  label: string; // must be unique
  description?: string;
  detail?: string;
  snippet: string; // must be valid SnippetString
  disabled?: boolean; // default: false
}

Editing/Disabling existing wrapper functions

Go to "Settings" and search for "surround.with.commandName".

Example surround.with.if:

{
  "label": "if",
  "description": "if ($condition) { ... }",
  "disabled": false,
  "snippet": "if(${1:condition}) {\n\t$TM_SELECTED_TEXT\n}$0"
}

Adding new custom wrapper functions

Go to "Settings" and search for surround.custom and edit it like below.

{
  "surround.custom": {
    // command name must be unique
    "yourCommandName": {
      // label must be unique
      "label": "Your Snippet Label",
      "description": "Your Snippet Description",
      "snippet": "burrito { $TM_SELECTED_TEXT }$0" // <-- snippet goes here.
    },
    // You can add more ...
  }
}

After you save the configuration, Surround will create surround.with.yourCommandName command for your snippet, so you can assign shortcuts to your most used wrapper functions.

IMPORTANT NOTES:

  1. All command names and labels must be unique. If you do not provide a unique command name or label, your custom wrapper functions will override existing ones.
  2. You can redefine all snippets as long as you provide a valid SnippetString. Read More

Known Issues

Even though all of the wrapper functions were written for Javascript, I didn't set a Language identifier for the extension, because you can use it for other languages by simply overriding existing snippets.

I would happily add built-in support for other languages if there is demand for it.

Contribution

As always, I'm open to any contribution and would like to hear your feedback.

Just an important reminder:

If you are planning to contribute to any open source project, before starting development, please always open an issue and make a proposal first. This will save you from working on features that are eventually going to be rejected for some reason.

I designed the logo on canva.com and inspired by one of their free templates.

LICENCE

MIT (c) 2017 Mehmet Yatkı

Enjoy!