Snippet Studio

This vscode extension provides a GUI for easy CRUD operations on vscode snippets and vscode snippet files. It allows you to see a list of custom snippets of the current language, edit them and create new ones.

Table of Contents

• Features
  • Managing Snippets
  • Managing Snippet Files
  • Creating Snippets
  • Snippet Tabstops, Placeholders, Choices, and Variables
  • Exporting Snippets
• Requirements
• Extension Settings
• Known Issues
• Release Notes
• License & Contributions

Features

Managing Snippets

The Snippets tree view loads all snippets of the current language. Whenever the current active language changes, the view updates.

• Click the + in the title menu to add a global snippet of the current language.
• Click the pencil to edit a the snippet.
• Click the trash can to delete the snippet.

Managing Snippet Files

The Locations Manager tree view shows you all snippet files found on your filesystem.

View Options

• Create Global Snippets File - Creates a snippet file of the current language to load sippets anytime accessing that language in VSCode.

• Create Global Mixed Snippets File - Creates a snippet file that can hold snippets of one or more languages

• Create Projects Snippets File - Creates a project snippets file in the .vscode folder local to the current open project. Snippets can be one or more languages.

• Double click a snippet file to open it.

• Click the + to add a snippet to the snippet file.

• Click the trash can to delete the snippet file.

Creating Snippets

The Snippet Editor webview only appears when creating or editing snippets.

1. Write the snippet code in the open buffer. Closing the editor will discard snippet changes and delete the buffer.
2. Fill out the form and click save. The snippet works if you can type the prefix in a file of the language and it appears in the autocomplete box. The title is the hint, the prefix appears on the left, and the snippet code and description show when interacting with the autocomplete menu. Type TAB to load the snippet's code into your code.

Read more about vscode snippets the vscode snippet documentation.

Snippet Tabstops, Placeholders, Choices, and Variables

The snippet buffer editor has extra tooling to assist in inserting Tabstops, Placeholders, Choices, and Variables.

Tabstops, placeholders, and choices allow you to quickly modify a snippet after it was inserted in pre-determined areas. Variables allow you to insert values based on the context of the file, selected language or current time.

Activate tooling for inserting these features by:

• Right clicking in the snippet buffer editor
• Selecting an insertion feature from the editor title's three-dot menu (...)
• Using keyboard shortcuts to trigger insertion commands

Exporting Snippets

You can share snippets easily with others by selecting which snippets you need and transfering them to a single .code-snippets file.

1. Click export snippets in the location manager's three-dot menu (...)
2. Specify a filename and save location.
3. Choose which snippet files to export
4. Choose which snippets from each file to export
5. Share the merged snippet file with someone who could benefit from it

You can follow a similar process, and save your snippets to Github on a shareable gist.

Requirements

• VS Code Version: This extension requires VS Code version 1.97.0 or higher.
• Node.js Version: This extension requires Node.js version 20.0.0 or higher.
• Virtual Workspaces: This extension has limited support for virtual workspaces. It relies on accessing the file system and Node.js file-related modules (fs, path, glob), which may not be fully available in virtual workspace environments.
• File System Access: This extension requires access to your local file system to manage VS Code snippets and snippet files.
• Web Version: This extension is not compatible with the web version of VS Code due to its reliance on Node.js file system APIs.

This extension isn't yet tested on the web version of vsocde and likely won't work. The web version operates in a sandboxed browser environment that restricts direct file system interactions.

Extension Settings

This extension contributes the following settings to enhance your SnippetStudio experience:

Snippet Creation Behavior

• defaultSnippetPrefix
• autoCapitalizeSnippetName
• cleanupSnippetSelection
• autoCreateSnippetFiles
• editor.autoEscapeDollarSigns
• editor.enableEditorForceSaveButton
• editor.useQuickPickForVariableInsertion
• editor.autoFillSnippetFeatureIds

User Interface

• statusBar.showItem
• statusBar.showLanguage
• statusBar.priority
• alwaysShowProjectSnippetFiles

Snippet Commands Behavior

• confirmSnippetDeletion
• export.location
• export.preconfiguredExportPath
• gists.onlySnippets

Known Issues

Record your issues in the q&a or in the github repository.

Important Notes

Titles of snippets must be unique, due to the format VSCode uses for storing snippet files in json. Changing a snippet title will create a copy of the snippet, and the old one can be deleted. Creating a new snippet with a duplicate snippet titlekey will delete the old snippet of the duplicate name.

Release Notes

See the changelog here!

License & Contributions

This extension is open source! Feel free to add github issues and recommondations. I am open to ideas of how you can collaborate.

Star this project!