{"id":14111253,"url":"https://github.com/yatki/vscode-surround","last_synced_at":"2025-05-16T10:08:29.980Z","repository":{"id":33826695,"uuid":"135798976","full_name":"yatki/vscode-surround","owner":"yatki","description":"πŸ”₯ A simple yet powerful extension to add wrapper templates around your code blocks","archived":false,"fork":false,"pushed_at":"2024-06-16T09:53:04.000Z","size":1213,"stargazers_count":1037,"open_issues_count":10,"forks_count":39,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T05:03:20.579Z","etag":null,"topics":["shortcut","snippets","surround","typescript","vscode-extension","vscode-snippets","wrapper"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yatki.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-02T07:57:49.000Z","updated_at":"2025-04-08T09:09:38.000Z","dependencies_parsed_at":"2023-01-16T22:45:28.275Z","dependency_job_id":"2fbccbea-dd1d-48ae-9363-4f45a276629c","html_url":"https://github.com/yatki/vscode-surround","commit_stats":{"total_commits":87,"total_committers":7,"mean_commits":"12.428571428571429","dds":"0.16091954022988508","last_synced_commit":"27191324cda48612634639f5b9a144e05204c1da"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatki%2Fvscode-surround","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatki%2Fvscode-surround/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatki%2Fvscode-surround/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatki%2Fvscode-surround/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yatki","download_url":"https://codeload.github.com/yatki/vscode-surround/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509477,"owners_count":22082892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["shortcut","snippets","surround","typescript","vscode-extension","vscode-snippets","wrapper"],"created_at":"2024-08-14T10:03:12.941Z","updated_at":"2025-05-16T10:08:24.971Z","avatar_url":"https://github.com/yatki.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","vscode-extension"],"sub_categories":[],"readme":"# Surround\n\n[![Visual Studio Marketplace](https://img.shields.io/vscode-marketplace/v/yatki.vscode-surround.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround)\n[![Visual Studio Marketplace](https://img.shields.io/vscode-marketplace/d/yatki.vscode-surround.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround)\n[![GitHub last commit](https://img.shields.io/github/last-commit/yatki/vscode-surround.svg?style=flat-square)](https://github.com/yatki/vscode-surround)\n[![License](https://img.shields.io/github/license/yatki/vscode-surround.svg?style=flat-square)](https://github.com/yatki/vscode-surround)\n\n\u003cp align=\"center\"\u003e\n\u003cbr /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/yatki/vscode-surround/master/images/logo.png\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nA simple yet powerful extension to add wrapper snippets around your code blocks.\n\u003c/p\u003e\n\n## Features\n\n- Now works on [VSCode for Web](https://code.visualstudio.com/docs/editor/vscode-web) πŸš€**New!**\n- Supports **language identifiers** \n- Supports **multi** selections\n- Fully **customizable**\n- **Custom** wrapper snippets\n- You can assign **shortcuts** for _each_ wrapper snippets separately\n- Nicely formatted (Preserves indentations)\n- Sorts recently used snippets on top\n\n### Demo 1: Choosing a wrapper snippet from quick pick menu\n\n![Demo 1](https://raw.githubusercontent.com/yatki/vscode-surround/master/images/demo.gif)\n\n### Demo 2: Wrapping multi selections\n\n![Demo 2](https://raw.githubusercontent.com/yatki/vscode-surround/master/images/demo2.gif)\n\n## How To Use\n\nAfter selecting the code block, you can\n\n- **right click** on selected code\n- OR press (ctrl+shift+T) or (cmd+shift+T)\n\nto get list of commands and pick one of them.\n\n\u003e Hint\n\u003e\n\u003e 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.\n\n### List of commands\n\n| Command | Snippet |\n| -------------------------------------------------- | --------------------------------------------------------------- |\n| `surround.with` (ctrl+shift+T) | List of all the enabled commands below |\n| `surround.with.if` | if ($condition) { ... } |\n| `surround.with.ifElse` | if ($condition) { ... } else { $else } |\n| `surround.with.tryCatch` | try { ... } catch (err) { $catchBlock } |\n| `surround.with.tryFinally` | try { ... } finally { $finalBlock } |\n| `surround.with.tryCatchFinally` | try { ... } catch (err) {$catchBlock} finally { $finalBlock } |\n| `surround.with.for` | for ($1) { ... } |\n| `surround.with.fori` | for (let i = 0; ... ; i = i + 1) { ... } |\n| `surround.with.forEach` | items.forEach((item) =\u003e { ... }) |\n| `surround.with.forEachAsync` | items.forEach(async (item) =\u003e { ... }) |\n| `surround.with.forEachFn` | items.forEach(function (item) { ... }) |\n| `surround.with.forEachAsyncFn` | items.forEach(async function (item) { ... }) |\n| `surround.with.arrowFunction` | const $name = ($params) =\u003e { ... } |\n| `surround.with.asyncArrowFunction` | const $name = async ($params) =\u003e { ... } |\n| `surround.with.functionDeclaration` | function $name ($params) { ... } |\n| `surround.with.asyncFunctionDeclaration` | async function $name ($params) { ... } |\n| `surround.with.functionExpression` | const $name = function ($params) { ... } |\n| `surround.with.asyncFunctionExpression` | const $name = async function ($params) { ... } |\n| `surround.with.element` | \\\u003celement\\\u003e...\\\u003c/element\\\u003e |\n| `surround.with.comment` | /\\*\\* ... \\*/ |\n| `surround.with.region` | #region $regionName ... #endregion |\n| `surround.with.templateLiteral` πŸš€**New!** | `...` (Also replaces single and double quotes with backtick) |\n| `surround.with.templateLiteralVariable` πŸš€**New!** | `${...}` (Also replaces single and double quotes with backtick) |\n| `surround.with.iife` πŸš€**New!** | (function $name($params){ ... })($arguments); |\n\n## Options\n\n- `showOnlyUserDefinedSnippets` (boolean): Disables default snippets that comes with the extension and shows only used defined snippets.\n- `showRecentlyUsedFirst` (boolean): Recently used snippets will be displayed on top.\n- `showUpdateNotifications` (boolean): Shows notification when there is a new version of the extension.\n\n## Configuration\n\nEach wrapper snippet config object is defined as `ISurroundItem` like below:\n\n```ts\ninterface ISurroundItem {\n label: string; // must be unique\n description?: string;\n detail?: string;\n snippet: string; // must be valid SnippetString\n disabled?: boolean; // default: false\n languageIds?: string[];\n}\n```\n\n### Editing/Disabling existing wrapper functions\n\nGo to \"Settings\" and search for \"surround.with._commandName_\".\n\nExample `surround.with.if`:\n\n```json\n{\n \"label\": \"if\",\n \"description\": \"if ($condition) { ... }\",\n \"disabled\": false,\n \"snippet\": \"if(${1:condition}) {\\n\\t$TM_SELECTED_TEXT\\n}$0\"\n}\n```\n\n### Adding new custom wrapper functions\n\nGo to \"Settings\" and search for `surround.custom` and edit it like below.\n\n```js\n{\n \"surround.custom\": {\n // command name must be unique\n \"yourCommandName\": {\n // label must be unique\n \"label\": \"Your Snippet Label\",\n \"description\": \"Your Snippet Description\",\n \"snippet\": \"burrito { $TM_SELECTED_TEXT }$0\", // \u003c-- snippet goes here.\n \"languageIds\": [\"html\", \"javascript\", \"typescript\", \"markdown\"]\n },\n // You can add more ...\n }\n}\n```\n\n### Defining language-specific snippets\n\nWith version [`1.1.0`](https://github.com/yatki/vscode-surround/releases), you can define snippets based on the document type by using `languageIds` option.\n\nVisit VSCode docs the full list of [language identifiers](https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers).\n\n#### 1. Enabling a snippet for ALL languages\n\nIf you want to allow a snippet to work for all document types, simply **REMOVE** `languageIds` option.\n\n**OR** set it to `[\"*\"]` as below:\n\n```jsonc\n{\n \"label\": \"if\",\n \"description\": \"if ($condition) { ... }\",\n \"disabled\": false,\n \"snippet\": \"if(${1:condition}) {\\n\\t$TM_SELECTED_TEXT\\n}$0\",\n \"languageIds\": [\"*\"] // Wildcard allows snippet to work with all languages\n}\n```\n\n#### 2. Enabling a snippet for ONLY specified languages\n\nIf you want to allow a snippet to work with `html`, `typescript` and `typescriptreact` documents, you can use the example below.\n\n```jsonc\n{\n \"label\": \"if\",\n \"description\": \"if ($condition) { ... }\",\n \"disabled\": false,\n \"snippet\": \"if(${1:condition}) {\\n\\t$TM_SELECTED_TEXT\\n}$0\",\n \"languageIds\": [\"html\", \"typescript\", \"typescriptreact\"]\n}\n```\n\n#### 3. Disabling a snippet for ONLY specified languages\n\nIf you want to allow a snippet to work with **all** document types **EXCEPT** `html`, `typescript` and `typescriptreact` documents,\nyou can add `-` (MINUS) sign as a prefix to the language identifiers (_without_ a whitespace).\n\n```jsonc\n{\n \"label\": \"if\",\n \"description\": \"if ($condition) { ... }\",\n \"disabled\": false,\n \"snippet\": \"if(${1:condition}) {\\n\\t$TM_SELECTED_TEXT\\n}$0\",\n \"languageIds\": [\"*\", \"-html\", \"-typescript\", \"-typescriptreact\"]\n}\n```\n\n### IMPORTANT NOTES:\n\n1. 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.\n1. You can redefine all snippets as long as you provide a valid `SnippetString`. [Read More](https://code.visualstudio.com/docs/extensionAPI/vscode-api#SnippetString)\n\n## Contribution\n\nAs always, I'm open to any contribution and would like to hear your feedback.\n\nPS: [Guide for running @vscode/test-web on WSL 2](https://medium.com/javarevisited/using-wsl-2-with-x-server-linux-on-windows-a372263533c3)\n\n### Just an important reminder:\n\nIf you are planning to contribute to **any** open source project,\nbefore starting development, please **always open an issue** and **make a proposal first**.\nThis will save you from working on features that are eventually going to be rejected for some reason.\n\n## Logo\n\nI designed the logo on [canva.com](https://canva.com) and inspired by one of their free templates.\n\n## LICENCE\n\nMIT (c) 2021 Mehmet YatkΔ±\n\n**Enjoy!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyatki%2Fvscode-surround","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyatki%2Fvscode-surround","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyatki%2Fvscode-surround/lists"}