SkillAgentSearch skills...

Snippets

Supercharge your Snippets in VS Code — Manage your code snippets & AI prompts without quitting your editor.

Install / Use

/learn @tahabasri/Snippets

README

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Downloads Visual Studio Marketplace Rating GitHub Repo stars GitHub Workflow Status (with event) The MIT License

Snippets — Supercharge Snippets in VS Code and Cursor

Code snippets are valuable additions for anyone looking to save time during development. They simplify the process of entering repetitive code, such as loops, complex HTML structures, or reusable methods.

Visual Studio Code already provides robust support for snippets, including their appearance in IntelliSense, tab-completion, and a dedicated snippet picker (Insert Snippet in the Command Palette). This extension takes snippets to another level by introducing new features that enhance code snippet management.

Getting Started

Install Snippets by one of the following options:

  • Clicking Install on the banner above
  • Searching for Snippets from the Extensions side bar in VS Code and Cursor
  • Typing ext install tahabasri.snippets from the Command Palette in VS Code and Cursor

Features | FAQ | Known Issues | Release Notes | Feedback | Credits

Features

Boost your productivity with a set of powerful features that enhance snippet management:

  • Create — Create Snippets easily with a few clicks.
  • Open — Open Snippets quickly from anywhere in VS Code and Cursor.
  • Search — Find your Snippet in 2 seconds or less.
  • Manage — Organize your snippets freely, with no forced order, beyond editing and deleting.
  • Customize — Personalize your Snippets to match your style.
  • Sync — Various options for synchronizing your snippets across multiple devices and users.
  • Boost — Supercharge your snippets to make them more developer-friendly.
  • AI Integration — Seamlessly work with AI assistants in VS Code.

Create

Create Snippet from open editor

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/01-new-snippet.gif" alt="Create Snippet">

Create Snippet directly from the clipboard

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/02-new-snippet-clipboard.gif" alt="Create Snippet from Clipboard">

Create Snippet manually

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/03-new-snippet-manual.gif" alt="Create Snippet Manually">

Open

Open Snippet with a single click

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/05-open-snippet-click.gif" alt="Open Snippet">

Drop Snippet directly into the editor

You may need to hold Shift key while dragging to correctly drop the item in the editor.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/063-drag-and-drop-into-editor.gif" alt="Open Snippet">

Copy Snippet to Clipboard

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/10-copy-to-clipboard.jpg" alt="Copy Snippet to Clipboard">

Insert Snippet directly into Terminal

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/08-open-snippet-terminal.gif" alt="Open Snippet in Terminal">

Search

Use IntelliSense to quickly access all your Snippets

You can set a special key to trigger IntelliSense from the extension settings. Default key is >. More about IntelliSense here.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/051-open-snippet-suggestion.gif" alt="Open Snippet using Suggestions">

Search for Snippets using Command Palette

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/07-open-snippet-palette.gif" alt="Open Snippets from Command Palette">

You can also search directly into the Snippets view similarly to the File Explorer.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/11-native-search.jpg" alt="Native Search">

Preview Snippets before insertion

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/006-preview.gif" alt="Preview Snippets">

Manage

Drag and drop Snippets from one folder to another

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/056-drag-and-drop.gif" alt="Drag and Drop Snippets">

Reorder Snippets using Up and Down actions

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/04-snippets-reorder.gif" alt="Reorder Snippets">

Sort alphabetically a Snippets folder or all your Snippets

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/047-sort-snippets.gif" alt="Reorder Snippets">

Action Buttons

The extension now features enhanced action buttons throughout the interface for improved usability, making it easier to perform common operations with fewer clicks.

When Action Buttons are enabled, they become the primary method for interacting with Snippets in the Tree view, replacing the default click behavior.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/18-action-buttons.png" alt="Action Buttons">

Customize

Set icons for your folders

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/051-folder-icons.gif" alt="Set Folder Icon">

Add a description to your Snippet

Descriptions show when hovering on top of a Snippet and in IntelliSense.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/064-description.gif" alt="Set Snippet Description">

Add a prefix to your Snippet

When displaying Snippets using IntelliSense, custom prefix will be used instead of the original Snippet label. A prefix is a recommended shortcut for Snippets with long labels.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/042-prefix.gif" alt="Set Snippet Prefix">

Prefix all your Snippets

You can set a prefix for all your snippets to distinguish them from other VS Code and Cursor snippets.

  • set a keyword for the setting Snippets: Global Prefix e.g snipp
  • suggestions coming from your custom Snippets will be prefixed in IntelliSense

An explicit prefix in a single Snippet will override Global Prefix settings.

For example, if the global prefix in your settings is set to foo, and a custom snippet is explicitly prefixed with boo, the latter will be displayed in IntelliSense as boo. All other snippets with no explicit prefix will be displayed as foo.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/12-global-prefix.jpg" alt="Global Prefix">

Sync

Import and Export Snippets using JSON files

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/13-import-export.jpg" alt="Import and Export Snippets">

Import VS Code Snippets to Cursor or Windsurf

You can import your existing VS Code snippets directly to Cursor or Windsurf combining the best snippets you collected for both editors.

Sync Snippets between multiple devices

⚠ Experimental feature: feel free to file a bug as this is still an experimental change.

Starting with version 2.0 and up, Snippets supports backup using VS Code Settings Sync feature. Your snippets will be saved alongside your VS Code data no matter your operating system.

Check the docs to know more about Settings Sync feature and how to use it.

Sync your Snippets with a Version Control System

A large number of users utilize a VCS (e.g Git) and may need to associate a set of snippets with a specific project (e.g sharing project-specific snippets with team members). This can be achieved by enabling the snippets.useWorkspaceFolder setting. Once this option is enabled, the extension will read/write snippets to/from the .vscode/snippets.json file if it's available (the extension will prompt you to create the file the first time you enable this option).

Note: Workspace snippets are excluded from synchronization via Settings Sync. You will be responsible for backing up the .vscode/snippets.json file using your favorite VSC.

Boost

Bind Snippets to Programming Languages

Snippets created from a language specific editor/file will keep reference of the programming language used. The same Snippet will be suggested only in editors/files of same programming language.

A Snippet bound to a programming language will get an icon for that particular language natively.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/038-language-scope.gif" alt="Bind Snippets to Languages">

You can explicitly set a programming language by appending the language file extension to the Snippet name at the creation prompt.

<img src="https://raw.githubusercontent.com/tahabasri/snippets/main/images/features/038-language-scope-by-name.gif" alt="Manually Bind Snippets to Languages">

Reso

View on GitHub
GitHub Stars168
CategoryDevelopment
Updated16d ago
Forks13

Languages

TypeScript

Security Score

100/100

Audited on Mar 14, 2026

No findings